Javascript 动态活动类不工作boostrap+；jQuery+；navbar.php

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

我正在使用的代码

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

$（文档）.ready（函数（）{
$（'ul.nav>li'）。单击（函数（e）{
e、 预防默认值（）；
$（'ul.nav>li'）。removeClass（'active'）；
$（this.addClass（'active'）；
});            
});

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

我做错了什么

---

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

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

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

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

---

代码中的主要错误是，每次单击链接时，页面都会重定向到另一个php页面，因此javascript单击事件的效果将被覆盖

此场景有两种可能的解决方案：-

• 通过将类active添加到该页面的相应锚定标记来实现服务器端解决方案，这是最简单的解决方案

• 实现一个javascript方法，该方法读取当前url并执行与锚定标记的匹配，并使匹配的锚定标记处于活动状态

---

这可以通过默认引导完成。请参阅以下内容的摘录：

$（函数（）{
$（'#myTab'）.tab（）
});

active类有什么CSS？一切都很好，

active

类也在反映。不确定我是否只是不了解选项卡功能，但文档中提供的代码对活动页面没有帮助。您需要包括包括jquery在内的引导javascript文件。您只需添加

[data toggle=“tab”]

属性。使用上述功能激活。单击后，您可以侦听生命周期事件以执行某些操作<代码>$（'a[data toggle=“tab”]'）。在（'show.bs.tab'，函数（e）{e.target//新激活的选项卡e.relatedTarget//上一个激活的选项卡}）

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
  </li>
</ul>

$(function () {
    $('#myTab').tab()
});