首页 > 代码库 > 导航条 高亮 包含所在列表页和内容页面【转载】

导航条 高亮 包含所在列表页和内容页面【转载】

js 高亮显示导航栏代码,通用方式,包括所在内容页

<!--js 高亮显示导航栏代码,通用方式,包括所在内容页-->
<div id="navmenu">   <ul id="navi">         <li><a href="http://www.mamicode.com/">图片首页</a></li>       <li><a href="http://www.mamicode.com/qcmn/">清纯美女</a></li>       <li><a href="http://www.mamicode.com/xhmn/">校花美女</a></li>       <li><a href="http://www.mamicode.com/qzmn/">气质美女</a></li>       <li><a href="http://www.mamicode.com/mtmn/">模特美女</a></li>       <li><a href="http://www.mamicode.com/mtsw/">美腿丝袜</a></li>       <li><a href="http://www.mamicode.com/xgmn/">性感美女</a></li>       <li><a href="http://www.mamicode.com/mxmn/">明星美女</a></li>       <li><a href="http://www.mamicode.com/ssfs/">时尚服饰</a></li>       <li><a href="http://www.mamicode.com/sgyh/">帅哥诱惑</a></li>      </ul> </div> <!--NAV--> <script type="text/javascript" language="javascript"> var nav = document.getElementById("navi"); var links = nav.getElementsByTagName("li"); var lilen = nav.getElementsByTagName("a"); //判断地址 var currenturl = document.location.href; var last = 0; for (var i=0;i<links.length;i++) {    var linkurl =  lilen[i].getAttribute("href");      if(currenturl.indexOf(linkurl)!=-1)         {          last = i;         } }          links[last].className = "navon";  //高亮代码样式 </script>
说明:  <ul id="navi">  中的ID值要和 var nav = document.getElementById("navi"); 中的想同,即在js中获取id="navi" 值,这个值要唯一,不能跟其它CSS或JS代码中ID同名。
        links[last].className = "navon";  这一句中的 navon 为你的高亮样式。
注意先后顺序!js代码一定要放在html代码后面

 
 
 
转载