javascript - Bootstrap Navbar颜色在按下时不会改变

我想在按下链接时更改活动类，但它似乎不起作用。

<nav class="navbar navbar-default navbar-static-top navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="/">HOME</a>
            </li>
            <li>
                <a href="/test1">TEST1</a>
            </li>
            <li>
                <a href="/test2">TEST2</a>
            </li>
        </ul>
    </div>
</nav>

这就是我尝试过的。但这似乎不起作用。不管我按什么，HOME始终处于活动状态。有任何想法吗？

<script>
    $(document).ready(function () {
        $('ul.nav > li > a').click(function () {
            $('ul.nav > li').removeClass('active');
            $(this).parent().addClass('active');
        });
    });
</script>

编辑：某些链接更改后，它可以工作。我还有一个问题，如何使活动类转到其他页面时不会重置为HOME？

最佳答案

检查您是否已正确加载Bootstrap框架（链接和脚本），它是否工作正常：

$(document).ready(function () {
    $('ul.nav > li > a').click(function (e) {
        e.preventDefault()
        $('ul.nav > li').removeClass('active');
        $(this).parent().addClass('active');
    });
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="/">HOME</a>
            </li>
            <li>
                <a href="/test1">TEST1</a>
            </li>
            <li>
                <a href="/test2">TEST2</a>
            </li>
        </ul>
    </div>
</nav>