导航栏中当前栏目高亮代码 html+css+js

　　在导航栏目中对当前栏目进行高亮设置，可以对用户有很好的用户体验，让你用户可以快速知道自己所在的位置，在很多cms中使用过程中，只能设置很多的不同模板样式代码来对每个栏目来实现这个功能，其实非常麻烦不适用，而且这样对后期的管理也非常不方便，大章力在研究一段时间后通过html+css+js的方法可以很好的实现当前栏目高亮的效果，(ps因为现在写代码前端都是用bootstrap5框架了，没有jquery，也不想为了实现这么一个功能去加载一个jquery)，下面整理下这个代码。

html导航栏的设置

通常的情况下我们的导航是如下代码(案例说明就没有加超链接)

   <div class="nav">
      <ul>
        <li>首页</li>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>服务项目</li>
        <li>公司资讯</li>
        <li>产品内容</li>
      </ul>
    </div>

给每个栏目加一个唯一识别的id，以便后去抓取栏目

    <div class="nav">
      <ul>
        <li id="navid_1">首页</li>
        <li id="navid_2">关于我们</li>
        <li id="navid_3">联系我们</li>
        <li id="navid_4">服务项目</li>
        <li id="navid_5">公司资讯</li>
        <li id="navid_6">产品内容</li>
      </ul>
    </div>

JS代码代码设置

 

<script type="text/javascript">
var cur_nav = document.getElementById("navid_" + 8);
cur_nav.className = "on";
</script>
<script type="text/javascript">
function navOn(id){
  var on = $("#navid_" + id);
  if( on.length < 1 ){
    $(".nav li").eq(0).find("a").addClass("on");
  }else{
    $("#navid_" + id).addClass("on");
  }
};</script>

CSS样式代码设置

li.on   {color:#e60012;}

原理就是获取当前栏目id，如果id不同就是不同的，如果id相同这个li就会添加一个.on的类，来实现当前栏目高亮。