首页 > 代码库 > 导航条 高亮 包含所在列表页和内容页面【转载】
导航条 高亮 包含所在列表页和内容页面【转载】
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代码后面