您的位置:首页 > Web前端 > JQuery

jquery/js当前URL对当前栏目高亮突出显示

2016-01-04 16:10 686 查看
html:

1 <div class="nav">
2         <ul>
3             <li><a href="index.html">首 页</a></li>
4             <li><a href="b.html">专家观点</a></li>
5             <li><a href="c.html">课题研讨</a></li>
6             <li><a href="d.html">研究报告</a></li>
7         </ul>
8     </div><!--/.nav-->


jquery:

1 //除了首页外当前URL对当前栏目高亮突出显示
2     $(".nav li a:not(:first)").each(function(){
3         $this = $(this);
4         if($this[0].href==String(window.location)){
5             $this.parent().addClass("selected");
6         }
7     });
8 //当前URL对当前栏目高亮突出显示
9     $(".sidenav li a").each(function(){
10         $this = $(this);
11         if($this[0].href==String(window.location)){
12             $this.parent().addClass("selected");
13         }
14     });


或者原生js:

1 //js 当前URL对当前栏目高亮突出显示
2 var myNav = document.getElementById("nav").getElementsByTagName("a");
3 for(var i=0;i<myNav.length;i++){
4     var links = myNav[i].getAttribute("href");
5     var myURL = document.location.href;
6     if(myURL.indexOf(links) != -1){
7         myNav[i].parentNode.className="selected";
8     }
9 }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: