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

问题描述

单击它时，我想将 li 类功能更改为“活动”。当它这样做时，它会打开一个新页面，并且 li 类被指定为活动的。例如，可以使用名为 Overview 的标签打开页面，定义为 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>

我说的是改变active的

当我单击任何基于

一般是这样显示的

<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 代码不能工作。我该如何解决？

标签： javascriptbootstrap-4html-lists

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

问题描述

解决方案

推荐阅读