通过JS实现网站中当前栏目高亮

---

概述：网站中的当前栏目高亮是比较常见的，那么本文就通过代码展示一下实现过程。

代码：

<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
  <div class="sidebar-sticky pt-3">
    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link" id="sy" href="{:url('Index/index')}"><span data-feather="home"></span>首页</a></li>
      <li class="nav-item"><a class="nav-link" id="lmgl" href="{:url('Category/index')}"><span data-feather="layers"></span>栏目管理</a></li>
      <li class="nav-item"><a class="nav-link" id="wzgl" href="{:url('Article/index')}"><span data-feather="file"></span>文章管理</a></li>
      <li class="nav-item"><a class="nav-link" id="yhgl" href="{:url('Users/index')}"><span data-feather="users"></span>用户管理</a></li>
      <li class="nav-item"><a class="nav-link" id="xtgl" href="{:url('System/index')}"><span data-feather="bar-chart-2"></span>系统管理</a></li>
    </ul>
  </div>
</nav>

<script type="text/javascript">
$(function (){
  var url = window.location.href;
  if (url.indexOf("index") >= 0){
    $("#sy").addClass("active");
  }
  else if(url.indexOf("cate_") >= 0){
    $("#lmgl").addClass("active");
  }
  else if(url.indexOf("art_") >= 0){
    $("#wzgl").addClass("active");
  }
  else if(url.indexOf("user_") >= 0){
    $("#yhgl").addClass("active");
  }
  else if(url.indexOf("system") >= 0){
    $("#xtgl").addClass("active");
  }
})
</script>

缺点：需要给每个栏目都添加一个自己的id属性，不够灵活

原创不易，转载请保留本站版权。

赞 赏