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 click事件的效果将被覆盖。

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

通过将活动类添加到该页面的相应锚标记来实现服务器端解决方案，这是最简单的解决方案
实现一个javascript方法，该方法读取当前网址并与锚标记执行匹配，并生成与活动网址匹配的锚标记。

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

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

3 个答案: