码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-06-23 07:50:07      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:class   java   ext   get   javascript   html   

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

<!--js 高亮显示导航栏代码,通用方式,包括所在内容页-->
<div id="navmenu">   <ul id="navi">         <li><a href="/">图片首页</a></li>       <li><a href="/qcmn/">清纯美女</a></li>       <li><a href="/xhmn/">校花美女</a></li>       <li><a href="/qzmn/">气质美女</a></li>       <li><a href="/mtmn/">模特美女</a></li>       <li><a href="/mtsw/">美腿丝袜</a></li>       <li><a href="/xgmn/">性感美女</a></li>       <li><a href="/mxmn/">明星美女</a></li>       <li><a href="/ssfs/">时尚服饰</a></li>       <li><a href="/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代码后面

 
 
 
转载

导航条 高亮 包含所在列表页和内容页面【转载】,布布扣,bubuko.com

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

标签:class   java   ext   get   javascript   html   

原文地址:http://www.cnblogs.com/sunShineJing/p/3799427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!