单击时如何更改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(){&nbsp; var current_page_URL = location.href;&nbsp; $( "a" ).each(function() {&nbsp; &nbsp; &nbsp;if ($(this).attr("href") !== "#") {&nbsp; &nbsp; &nbsp; &nbsp;var target_URL = $(this).prop("href");&nbsp; &nbsp; &nbsp; &nbsp;if (target_URL == current_page_URL) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('nav a').parents('li, ul').removeClass('active');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).parent('li').addClass('active');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;}&nbsp; });});