Bootstrap导航栏活动状态不起作用

89

我有bootstrap v3。

我在我的菜单class="active"上使用，navbar并且在按菜单项时不会切换。我知道如何使用此jQuery功能并构建点击功能，但我认为此功能应包含在引导程序中？那么也许是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设置也许？）

javascript  html  twitter-bootstrap  twitter-bootstrap-3 
— 莴苣大师
source
3
自从我开始使用Bootstrap以来，我认为Boostrap无法管理它，您必须自己设置活动类...如果我错了，我会从中学到很多东西……
— BENARD Patrick
1
@TheLittlePig是正确的，您需要active在应用程序生成HTML时自己添加类。
— DavidG 2014年

Answers:

144

您已经包括了缩小的Bootstrap js文件和合拢/转换插件，而文档指出：

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

和

为了获得简单的过渡效果，请在其他JS文件旁边添加一次transition.js。如果您使用的是已编译（或最小化）的bootstrap.js，则无需包含此文件-它已经存在。

因此，这可能是最小化问题的问题。

对于活动的班级，您必须自己进行管理，但这只是一两行。

引导程序3：

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

Bootply：http：//www.bootply.com/IsRfOyf0f9

引导程序4：

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});
— 皮特·TNT
source
2
如果您从页面移到另一个页面href（不是散列，而是发送另一个请求），这是否可行？
— Blaszard '16
1
@Blaszard在非单页应用程序/站点中，默认情况下您应该active在该nav项目上上课。
— Pete TNT
对我不起作用。列表项永远不会显示为活动状态！？你们正在做什么我不是在做什么？
— user465342 '16
4
它对我不起作用，它被添加了，但是在下一秒钟它将进入初始活动课程，所以它不会停留在页面上，请任何人对此提供帮助
— sourav78611
9
@Pete TNT-尚不清楚，当人们给出90％的配售价格并假定所有人都知道如何应用剩余的10％时，这非常令人沮丧。特别是在语法难以正确使用的情况下。
— 戴夫
95

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

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});
— 乔恩
source
2
我们该放在哪里？抱歉; JS
— 新手
2
这工作正常，在引导4. @ Thomas8：这应该去之间<script>和</script> tags at the bottom of the html file before the </ body>标签`（假设你有一个HTML文件中的所有内容）。
— alwaysCurious18年
在site.js中添加了相同的内容，但没有任何<script>标记，并且可以正常运行$（document）.ready（function（）{$（'li.active'）。removeClass（'active'）; $（'a [href = “'+ location.pathname +'”]'）。closest（'li'）。addClass（'active'）;}）;
— Oracular Man '18
对我来说，这是唯一适用于bootstrap 3.3.7的解决方案，非常感谢。
— MitchellK '18
该解决方案最终对我有用。我添加了功能：console.log（location.pathname）并意识到，如果我更改为<a href='foo/bar/，我在 <a href='foo/bar>中错过了最后一个“ /” '>，则此功能可在导航栏上激活正确的“ li”。
— 艾米丽
16

这对我来说效果很好，因为“ window.location.pathname”还包含真实页面名称之前的数据，例如directory / page.php。因此，仅当网址包含此链接时，才会将实际的导航栏链接设置为活动。

$(document).ready(function() {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
});
— 贝特布尔舍
source
5
除您的解决方案外，所有其他解决方案均不起作用，我
— 一步一步地
14

使用Bootstrap 3.3.4版时，在较长的html页面上，您可以参考pg的各个部分。通过class或id通过带有body元素的spy-scroll管理活动的导航栏链接：

  <body data-spy="scroll" data-target="spy-scroll-id">

数据目标将是具有id =“ spy-scroll-id”的div

    <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（）则不会。

— 吉姆
source
1
谢谢。应该是：data-target =“＃spy-scroll-id”而不是data-target =“ spy-scroll-id”
— Vdex 2016年
10

您需要做的就是将data-toggle =“ tab”添加到引导导航栏中的链接，如下所示：

<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>
— 哈坎·菲斯蒂克
source
这确实很有用，但是当您有一个navbar-nav（正常）并且还有一个navbar-right第二个列表时，它是行不通的。您最终遇到了两个从未清除的活动
— Karl P
5
当我添加“数据切换”时，页面无法转到href中指定的“ #place”。
— scorpiozj
实际上是一个更新。正如@scorpiozj所提到的。添加此链接后，链接本身将不起作用
— mrateb
9

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

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

这个优雅的解决方案为我解决了问题。任何新的想法/建议都欢迎。

$( document ).on( 'click', '.nav-list li', function ( e ) {
    $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
} );

您可以使用jQuery的“ siblings（）”方法来仅使被访问的项目保持活动状态，而其同级处于不活动状态。

— 杰弗林·约瑟夫
source
2

今天，我一直在为此苦苦挣扎，只有在单页面应用程序中，数据转换才起作用。

我没有使用ajax加载我实际上对其他页面进行后期请求的内容，因此第一个js脚本也没有用。我用以下几行来解决它：

var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");
— 费尔南多·阿苏莱
source
1

我希望这将有助于解决此问题。

      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";
            });
        });
— 基里尔·舒尔
source
1

使用动态生成的列表项-WordPress Stack，我为此感到有些痛苦。

添加了它，它起作用了： 

$(document).ready(function () {
    $(".current-menu-item").addClass("active");
});

会即时进行。

— Someguywhocodes
source
1

我用这个 它简短，易懂且易于理解。

$(document).ready(function() {
    $('a[href$="' + location.pathname + '"]').addClass('active');
});
— 伊瓦达斯
source
0

对于单击某个项目后取消引导移动菜单的折叠，可以使用此功能 

$("ul.nav.navbar-nav li a").click(function() {    

    $(".navbar-collapse").removeClass("in");
});
— 努鲁·阿敏（Nurul Amin）
source
0

我正在使用引导程序裸主题，这是示例导航栏代码。注意元素的类名-> .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视图片段->

- 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的解决方案稍有不同，后者帮助我解决了问题。

— 里士
source
0

对于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，则不会出现哈希。因此您可以使用以下方法从URL中提取所需的字符串$ location

以下情况并非在所有情况下都适用->

使用如下所示的作用域变量仅在单击时有效，但是如果使用$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>
— 马赫什
source
0

我必须前进一步，因为我的文件名与导航栏标题不同。即我的第一个导航栏链接是HOME，但文件名是index ..

因此，只需获取路径名并进行匹配即可。

显然，这是一个粗糙的示例，可能会更有效，但这是高度定制的需求。

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');
}
— Cparello
source
0

适用于我的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时，此方法才有效！

如果要在自己的PC上测试站点（使用wamp，xampp，灯等），并且站点位于某个子文件夹中，则您的路径实际上是“ /somefolder/something.php”，因此请不要获取困惑。

我建议您不确定是否使用以下代码，以便确定什么是正确的location.pathname：

$(document).ready(function() {
  alert(location.pathname);
});
— 卢卡
source
0

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

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

举个例子

— 未来
source
0

作为不懂javascript的人，这是一个对我有用的PHP方法，易于理解。我的整个导航栏位于一个PHP函数中，该函数位于页面中包含的通用组件文件中。例如，在我的“ index.php”页面中，...

<?php
   $calling_file = basename(__FILE__);
   include 'my_common_includes.php';    // Going to use my navbar function "my_navbar"
   my_navbar($calling_file);    // Call the navbar function
 ?>

然后在“ my_common_includes.php”中，我有...

<?php
   function my_navbar($calling_file)
   {
      // All your usual nabvbar code here up to the menu items
      if ($calling_file=="index.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="index.php">Home</a>
</li>';
      if ($calling_file=="about.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="about.php">About</a>
</li>';
      if ($calling_file=="galleries.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="galleries.php">Galleries</a>
</li>';
       // etc for the rest of the menu items and closing out the navbar
     }
  ?>
— M61火神
source
0

Bootstrap 4要求您将li项目定位为活动类。为此，您必须找到的父项a。的“ hitbox”与的“ hitbox”a一样大，li但是由于JS中事件的冒泡，它将使您返回该a事件。因此，您必须手动将其添加到其父级。

  //set active navigation after click
  $(".nav-link").on("click", (event) => {
    $(".navbar-nav").find(".active").removeClass('active');
    $(event.target).parent().addClass('active');
  });
— 米开朗基罗
source
0

我尝试了前5个解决方案以及它们的不同变体，但它们对我不起作用。

最终，我将其与这两个功能一起使用。

$(document).on('click', '.nav-link', function () {
    $(".nav-item").find(".active").removeClass("active");
})

$(document).ready(function() {
    $('a[href="' + location.pathname + '"]').closest('.nav-item').addClass('active'); 
});
— Jukka S.
source
0

当在导航页代码的每个页面上使用header.php时，jquery无法正常工作，先应用active然后再将其删除，一个简单的解决方案如下

在每个页面<?php $pageName = "index"; ?>上，在“索引”页面上设置变量，并<?php $pageName = "contact"; ?>在“与我们联系”页面上同样 设置

然后调用header.php（即导航代码在header.php中） <?php include('header.php'); >

在header.php中，确保每个导航链接如下

<a class="nav-link <?php if ($page_name == 'index') {echo "active";} ?> href="index.php">Home</a>

<a class="nav-link <?php if ($page_name == 'contact') {echo "active";} ?> href="contact.php">Contact Us</a>

希望这有助于导致我花了几天的时间来使jquery工作，但失败了，

如果有人会友好地解释当包含header.php并随后加载页面时到底是什么问题……为什么jquery无法将活动类添加到nav-link。

— 斯里坎特·卡玛特（Srikanth Kamath）
source
0

我一直在寻找可以在bootstrap 4导航栏和其他链接组上使用的解决方案。

由于一个或另一个原因，大多数解决方案都不起作用，尤其是那些尝试在onclick链接上添加“活动”的解决方案，因为一旦单击链接（如果该链接将您带到另一页），那么添加的“活动”将不会被使用。因为DOM已更改。其他许多解决方案均无法正常工作，因为它们通常不匹配链接，或者它们匹配多个。

这种优雅的解决方案适用于不同的链接，例如：about.php，index.php等。

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + '"]').addClass('active');
});

但是，当涉及到具有不同查询字符串的相同链接（例如index.php？tag = a，index.php？tag = b，index.php？tag = c）时，会将所有链接设置为活动状态匹配路径名而不是查询。

因此，我尝试了与路径名和查询字符串匹配的代码，并且该代码适用于所有带有查询字符串的链接，但是当单击类似index.php的链接时，它也会将类似的查询字符串链接设置为活动状态。这是因为如果链接中没有查询字符串，那么我的函数将返回一个空字符串，再次与路径名匹配。

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + returnQueryString(location.href.split("?")[1]) + '"]').addClass('active');
});
/** returns a query string if there, else an empty string */
function returnQueryString (element) {
   if (element === undefined)
      return "";
   else
      return '?' + element;
}

因此，最终我放弃了这条路线，并保持简单并编写了此路线。

$('.navbar a').each(function(index, element) {
    //console.log(index+'-'+element.href);
    //console.log(location.href);
    /** look at each href in the navbar
      * if it matches the location.href then set active*/
    if (element.href === location.href){
        //console.log("---------MATCH ON "+index+" --------");
        $(element).addClass('active');
    }
});

它适用于所有带有或不带有查询字符串的链接，因为element.href和location.href都返回完整路径。对于其他菜单等，您可以简单地将父类选择器（navbar）更改为另一个，即：

$('.footer a').each(function(index, element)...

最后一件事似乎也很重要，那就是您正在使用的js＆css库，但这也许是另一篇文章。我希望这会有所帮助。

— 史蒂夫·惠特比
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.