Bootstrap navbar Active State无法正常工作-Java 学习之路

我有bootstrap v3 .

我在 navbar 上使用 class="active" ，当我按下菜单项时它不会切换 . 我知道如何用 jQuery 做这个并构建一个单击函数，但我认为这个功能应该包含在bootstrap中？那么也许这是一个JavaScript问题？

这是我的头文件，包含我的js / css / bootstrap文件：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />

<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>

这是我的 navbar 代码：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="/index.php">MyBrand</a>
            </div>

            <div class="collapse navbar-collapse navbarCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="/index.php">Home</a>
                    </li>

                    <li>
                        <a href="/index2.php"> Links</a>
                    </li>

                    <li>
                        <a href="/history.php">About</a>
                    </li>
                    <li>
                        <a href="/contact.php">Contact</a>
                    </li>

                    <li>
                        <a href="/login.php">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

我这样做了吗？

（在一个不相关的注释，但可能相关？当菜单移动时，我点击菜单按钮，它崩溃 . 再次推它不会崩溃它 . 所以这个问题，与另一个，都表示错误的JavaScript设置也许？）

19 回答

8
对于bootstrap移动菜单单击项目后解除折叠，您可以使用此功能
```
$("ul.nav.navbar-nav li a").click(function() {    

    $(".navbar-collapse").removeClass("in");
});
```
回复于 2024-04-27T04:29:38+08:00
0
您已经包含了缩小的Bootstrap js文件和折叠/转换插件，而文档说明：

bootstrap.js和bootstrap.min.js都包含单个文件中的所有插件 . 仅包括一个 .

和

对于简单的过渡效果，请将transition.js包含在其他JS文件旁边 . 如果你正在使用编译的（或缩小的）bootstrap.js，则不需要包含它 - 它已经存在了 .

这对于最小化问题很可能是你的问题 .

对于活动类，您必须自己管理它，但它只是一两行 .

Bootstrap 3：
```
$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});
```
Bootply：http://www.bootply.com/IsRfOyf0f9

Bootstrap 4：
```
$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});
```
回复于 2024-04-27T04:29:38+08:00

这是我切换活动页面的解决方案

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});

回复于 2024-04-27T04:29:38+08:00

9
使用版本3.3.4的bootstrap，在长html页面上，您可以参考pg的各个部分 . 通过class或id来管理带有spy-scroll和body元素的活动导航栏链接：
```
<body data-spy="scroll" data-target="spy-scroll-id">
```
数据目标将是一个div，其id =“spy-scroll-id”
```
<div id="spy-scroll-id" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#topContainer">Home</a></li>
        <li><a href="#details">About</a></li>
        <li><a href="#carousel-container">SlideShow</a></li>
      </ul>
    </div>
```
这应该通过点击而不需要任何javascript函数来激活链接，并且当你滚动浏览页面的相应链接部分时js onclick（）将不会自动激活每个链接 .
回复于 2024-04-27T04:29:38+08:00

这对我来说是完美的，因为“window.location.pathname”也包含真实页面名称之前的数据，例如：目录/ page.php文件 . 因此，如果网址包含此链接，则实际的导航栏链接将仅设置为活动状态 .

$(document).ready(function() {
    // -----------------------------------------------------------------------
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
    // -----------------------------------------------------------------------
});

回复于 2024-04-27T04:29:38+08:00

130

如果您不使用锚链接，可以使用以下内容：

$(document).ready(function () {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active',
            '/' + $(this).find('a').attr('href') == window.location.pathname);
    });
});

回复于 2024-04-27T04:29:38+08:00

您只需将 data-toggle="tab" 添加到bootstrap导航栏中的链接，如下所示：

<ul class="nav navbar-nav">
  <li class="active"><a data-toggle="tab" href="#">Home</a></li>
  <li><a data-toggle="tab" href="#">Test</a></li>
  <li><a data-toggle="tab" href="#">Test2</a></li>
</ul>

回复于 2024-04-27T04:29:38+08:00

使用Bootstrap 4，您可以使用：

$(document).ready(function() {
    $(document).on('click', '.nav-item a', function (e) {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

回复于 2024-04-27T04:29:38+08:00

5
这个优雅的解决方案为我做了诀窍 . 欢迎任何新的想法/建议 .
```
$( document ).on( 'click', '.nav-list li', function ( e ) {
    $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
} );
```
您可以使用jQuery的“siblings（）”方法来仅保持所访问的项目处于活动状态，并使其兄弟处于非活动状态 .
回复于 2024-04-27T04:29:38+08:00
13
今天我一直在努力解决这个问题，只有在单页应用程序上才能使用数据转换功能 .

我没有使用ajax来加载我实际上正在为其他页面发布请求的内容，所以第一个js脚本也没用 . 我用这句话解决了这个问题：
```
var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");
```
回复于 2024-04-27T04:29:38+08:00

我希望这有助于解决这个问题 .

var navlnks = document.querySelectorAll(".nav a");
        Array.prototype.map.call(navlnks, function(item) {

            item.addEventListener("click", function(e) {

                var navlnks = document.querySelectorAll(".nav a"); 

                Array.prototype.map.call(navlnks, function(item) {

                    if (item.parentNode.className == "active" || item.parentNode.className == "active open" ) {

                        item.parentNode.className = "";

                    } 

                }); 

                e.currentTarget.parentNode.className = "active";
            });
        });

回复于 2024-04-27T04:29:38+08:00

4
我对此有些痛苦，使用动态生成的列表项 - WordPress Stack .

添加了这个，它工作：
```
$(document).ready(function () {
    $(".current-menu-item").addClass("active");
});
```
会在飞行中做到这一点 .
回复于 2024-04-27T04:29:38+08:00
13

“活动”类不是使用bootstrap开箱即用的 . 在您使用PHP的情况下，您可以看到：

How add class='active' to html menu with php

为您提供一种主要使其自动化的方法 .

回复于 2024-04-27T04:29:38+08:00

我使用bootstrap裸主题，这是示例导航条代码 . 请注意元素的类名 - > .nav - 因为这是在java脚本中引用的 .

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

在视图页面（或部分）中添加：javascript，这需要在每次加载页面时执行 .

haml view snippet - >

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

在javascript调试器中，确保'href'属性的值与window.location.pathname匹配 . 这与@Zitrax的解决方案略有不同，后者帮助我解决了我的问题 .

回复于 2024-04-27T04:29:38+08:00

对于 AngularJS ，您可以使用 ng-class 这样的函数：

HTML - >

<nav class="navbar navbar-default" ng-controller="NavCtrl as vm">
  <div class="container">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav" >
        <li ng-class="vm.Helper.UpdateTabActive('Home')"><a href="#" ng-click>Home</a></li>
        <li ng-class="vm.Helper.UpdateTabActive('About')"><a href="#about">About</a></li>
        <li ng-class="vm.Helper.UpdateTabActive('Contact')"><a href="#contact">Contact</a></li>        
      </ul>
    </div>
</nav>

和控制器

app.controller('NavCtrl', ['$scope', function($scope) {
    var vm = this;
    vm.Helper = {
        UpdateTabActive: function(sTab){
            return window.location.hash && window.location.hash.toLowerCase() == ("#/" + sTab).toLowerCase() ? 'active' : '';
        }
    }    
}]);

如果您使用的是$ location，那么就不会有哈希值 . 所以你可以使用$location从URL中提取所需的字符串

以下将不适用于所有情况 - >

使用像下面这样的范围变量仅在单击时才起作用，但如果使用 $state.transitionTo 或window.location完成转换或手动更新URL，则Tab值将不会更新

<ul class="nav navbar-nav" ng-init="Tab='Home'">
   <li ng-class="Tab == 'Home' ? 'active' : ''"><a href="#" ng-click="Tab = 'Home'">Home</a></li>
   <li ng-class="Tab == 'About' ? 'active' : ''"><a href="#" ng-click="Tab = 'About'">About</a></li>
</ul>

回复于 2024-04-27T04:29:38+08:00

Add this JavaScript on your main js file.

$(".navbar a").on("click", function(){
      $(".navbar").find(".active").removeClass("active");
      $(this).parent().addClass("active");
    });

回复于 2024-04-27T04:29:38+08:00

一世不得不前进一步，因为我的文件名与我的导航栏 Headers 不一样 . 即我的第一个导航栏链接是HOME但文件名是索引..

所以只需获取路径名并匹配即可 .

显然，这是一个粗略的例子，可能更有效，但它是高度定制的需求 .

var loc_path = location.pathname;
$('li.active').removeClass('active');



if(loc_path.includes('index')){
    $('li :eq(0)').addClass('active');
}else if(loc_path.includes('blog')){
    $('li :eq(2)').addClass('active');
}else if(loc_path.includes('news')){
    $('li :eq(3)').addClass('active');
}else if(loc_path.includes('house')){
    $('li :eq(4)').addClass('active');
}

回复于 2024-04-27T04:29:38+08:00

Bootstrap 4解决方案对我有用：

$(document).ready(function() {
//You can name this function anything you like
function activePage(){
//When user lands on your website location.pathname is equal to "/" and in 
//that case it will add "active" class to all links
//Therefore we are going to remove first character "/" from the pathname
  var currentPage = location.pathname;
  var slicedCurrentPage = currentPage.slice(1);
//This will add active class to link for current page
  $('.nav-link').removeClass('active');
  $('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
//This will add active class to link for index page when user lands on your website
     if (location.pathname == "/") {
         $('a[href*="index"]').closest('li').addClass('active');
    }
}
//Invoke function
activePage();
});

这仅在 href 包含 location.pathname 时才有效！

如果你在自己的电脑上测试你的网站（使用wamp，xampp，lamp等等）并且你的网站位于某个子文件夹中，那么你的路径实际上是“/somefolder/something.php”，所以不要得到困惑 .

我建议如果你不确定使用下面的代码，那么你可以确定什么是正确的 location.pathname ：

$(document).ready(function() {
  alert(location.pathname);
});

回复于 2024-04-27T04:29:38+08:00

下一个答案是针对那些拥有多级菜单的人：

var url = window.location.href;

var els = document.querySelectorAll(".dropdown-menu a");
for (var i = 0, l = els.length; i < l; i++) {
    var el = els[i];
    if (el.href === url) {
       el.classList.add("active");
       var parent = el.closest(".main-nav"); // add this class for the top level "li" to get easy the parent
       parent.classList.add("active");
    }
}

Exeample how it works

回复于 2024-04-27T04:29:38+08:00

Bootstrap navbar Active State无法正常工作

19 回答

相关问题