讲解版--导航高亮（新手福利）原生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>