单击时如何更改li标签

Question

我想在单击它时将li类功能更改为“活动”。这样做时，它将打开一个新页面，并且li类被指定为活动的。例如，可以使用为概述定义的名称命名的标签打开页面。当我单击任何标签时，可以使用li标签打开新页面。我尝试编写一些代码，但无法更改li的活动状态这是我的代码，如下所示。主页<div class="col-sm-3 col-md-2 sidebar">    <ul class="nav nav-sidebar">        <li class="active"><a href="index.jsp">Overview</a></li>        <li><a href="list_users">Users</a></li>        <li><a href="#">Categories</a></li>        <li><a href="#">Books</a></li>    </ul>        <ul class="nav nav-sidebar">        <li><a href="#">Customers</a></li>        <li><a href="#">Reviews</a></li>        <li><a href="#">Orders</a></li>        </ul></div>用户页面。<div class="col-sm-3 col-md-2 sidebar">    <ul class="nav nav-sidebar">        <li><a href="index.jsp">Overview</a></li>        <li><a href="list_users">Users</a></li>        <li><a href="#">Categories</a></li>        <li><a href="#">Books</a></li>    </ul>    <ul class="nav nav-sidebar">        <li><a href="">Customers</a></li>        <li><a href="">Reviews</a></li>        <li><a href="">Orders</a></li>    </ul></div>JavaScript代码<script>    // Nav bar change active status    $(".nav li").on("click", function() {        $(".nav li").removeClass("active");        $(this).addClass("active");    });</script>我的意思是改变积极性当我单击基于的任何项目时。通常，它显示像这样<div class="col-sm-3 col-md-2 sidebar">    <ul class="nav nav-sidebar">        <li><a href="index.jsp">Overview</a></li>        <li class="active"><a href="list_users">Users</a></li>        <li><a href="#">Categories</a></li>        <li><a href="#">Books</a></li>    </ul>    <ul class="nav nav-sidebar">        <li><a href="">Customers</a></li>        <li><a href="">Reviews</a></li>        <li><a href="">Orders</a></li>    </ul></div>我的意思是表明javascipt代码无法正常工作。我该如何解决？

Answer 1

这是我的答案。我解决了

$(function(){

  var current_page_URL = location.href;

  $( "a" ).each(function() {

     if ($(this).attr("href") !== "#") {

       var target_URL = $(this).prop("href");

       if (target_URL == current_page_URL) {

          $('nav a').parents('li, ul').removeClass('active');

          $(this).parent('li').addClass('active');

          return false;

       }

     }

  });

});