javascript - 如何在点击时更改 li 标签

Question

我想在单击 li 类功能时将其更改为“事件”。当它出现时，它会打开一个新页面，并且 li 类被指定为事件的。例如，可以使用名为“概述”的标签(如定义的 li)打开该页面。当我单击任何标签时，可以打开新页面，并且 li 标签处于事件状态。我尝试编写一些代码，但无法更改 li 的 active

这是我的代码，如下所示。

主页

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