Question

我想在按下链接时更改活动类，但它似乎无法正常工作。

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

Answer 1

检查你是否正确加载了Boostrap框架（链接和脚本），它工作正常：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我已经测试了你的代码。它的工作。请查看以下内容。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 $(document).ready(function () {
        $('ul.nav > li > a').click(function () {
            $('ul.nav > li').removeClass('active');
            $(this).parent().addClass('active');
        });
    });
</script>
<style>
 li.active {
    background-color: red;
 }
</style>
</head>
<body>

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

</body>
</html>

按下时Bootstrap Navbar颜色不变

2 个答案: