讲解版--导航高亮(新手福利)原生JS
1、先写样式:
导航的排版样式;
导航对应高亮样式:
.d6000f{ background:red; } .d6000f a{ color:#fff; }
我这个地方导航高亮样式为背景红色,字体颜色为白色
2、HTML代码:
<ul class="nav"> <li class="aa"><a class="aaa" href="/">首页</a></li> <li class="aa"><a class="aaa" href="***">11111</a> <div class="nav2 ntop" id="nav2"> <ul class="nav2_ul"> <li><a href="***">111112</a></li> <li><a href="***">111113</a></li> <li><a href="***">111114</a></li> <li><a href="***">111115</a></li> <li><a href="***">111116</a></li> </ul> </div> </li> <li class="aa"><a class="aaa" href="***">22222</a></li> <li class="aa"> <a class="aaa" href="***">33333</a> <div class="nav2 ntop" id="nav3"> <ul class="nav2_ul"> <li><a href="***">333332</a></li> <li><a href="***">333333</a></li> </ul> </div> </li> <li class="aa"><a class="aaa" href="***">44444</a></li> <li class="aa"><a class="aaa" href="***">55555</a></li> <li class="aa"><a class="aaa" href="***">66666</a></li> </ul>
因为在网站中每个顶级导航栏对应不同的页面,那么我们如何让它在对应的页面时,对应的li高亮呢?
下面我们用js代码写下操作。
3、JS代码:
<script type="text/javascript" language="javascript"> /*顶级导航所有的li*/ var links = document.getElementsByClassName("aa"); /*顶级导航所有的li对应的a*/ var lilen = document.getElementsByClassName("aaa"); /*当前地址栏的url*/ var currenturl = document.location.href; /*创建变量用来接收数据*/ var last = 0; /*遍历顶级导航中所有li*/ for (var i = 0; i < links.length; i++) { /*声明变量接收每个li的url*/ var linkurl = lilen[i].getAttribute("href"); /*判断当前地址栏的url和当前li的url路径对应则执行下面赋值("indexof"判断为-1时,是找不到对应的字符串,而"! = -1",说的就是可以找到对应的字符串)*/ if (currenturl.indexOf(linkurl) != -1) { /*将当前的li的索引赋给last*/ last = i; } } /*当前li设置class名称为设置好的样式"d6000f"*/ links[last].className = "d6000f"; </script>