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