讲解版的导航高亮（新手福利）原生JS

最新推荐文章于 2021-05-21 14:52:52 发布

weixin_33827731

最新推荐文章于 2021-05-21 14:52:52 发布

阅读量511

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/thongyan/p/6186932.html

本文介绍了一种使用HTML、CSS和JavaScript实现网页导航栏高亮显示的方法。通过监听当前URL并与导航链接进行对比，自动为当前页面的导航项添加高亮样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>