javascript - 动态事件类不工作 bootstrap + jQuery + navbar.php

Question

很抱歉提出一个过去在这里被问得太多的问题，但我仍然卡住了，希望你能为初学者提供见解。

我正在使用的代码。

<script>
$(document).ready(function () {
    $('ul.nav > li').click(function (e) {
        e.preventDefault();
        $('ul.nav > li').removeClass('active');
        $(this).addClass('active');                
    });            
  });
</script> 
<nav class="navbar navbar-default">
 <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Brand Text</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="/index.php">Home</a></li>
        <li><a href="/one.php">One</a></li>
        <li><a href="/two.php">Two</a></li>
        <li><a href="/three.php">Three</a></li>
        <li><a href="/four.php">Four</a></li>
        <li><a href="/five.php">Five</a></li>
    </ul>
 </div>
</nav>

所有这些都是包含在 header.php 文件中的我的 navbar.php 文件的内容。

我做错了什么？

还有；我的印象是 Bootstrap 的意义在于我们不必编写自定义 js/jquery。不应该内置这种功能吗？我是否误解了 Bootstrap 的概念？

Answer 1

尝试这种方式，但请记住每次重新加载页面时，设置将被删除并且整个菜单将被重置

$(document).ready(function () {
    $('ul.nav > li').click(function (e) {
        var $currentElement = $(this);

        e.preventDefault();
        $currentElement.siblings().removeClass('active');
        $currentElement.addClass('active');
    });
});