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>

但它确实像这样显示

<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>

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

我的意思是表明javascipt代码无法正常工作。我该如何解决？

Answer 1

您为什么不使用CSS pseudo class :active解决此问题？

.nav li:active {
    // your style
}

Answer 2

这是我的答案。我解决了。

$(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;
       }
     }
  });
});

单击时如何更改li标签

2 个答案: