动态活动类不工作 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>

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

我做错了什么？

还有；我的印象是引导的目的是让我们不必编写自定义 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');
    });
});

Answer 2

您的代码的主要错误是，当点击链接时，页面被重定向到另一个 php 页面，因此 javascript 点击事件的效果将被覆盖。

这种情况有两种可能的解决方案：-

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

• 实现一个 javascript 方法，读取当前 url 并与锚标记执行匹配，并使锚标记匹配到活动。

Answer 3

这可以通过默认引导程序来完成，请参阅他们的documentation 的摘录：

<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()
});