ブートストラップナビゲーションバーのアクティブ状態が機能しない

90

私はブートストラップ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 
— TheLettuceMaster
ソース
3
私がブートストラップを使用しているときから、Boostrapはそれを管理していないと思います。アクティブなクラスを自分で設定する必要があります...私が間違っている場合は、
— それで
1
@TheLittlePigは正しいですactive。アプリケーションがHTMLを生成するときに、自分でクラスを追加する必要があります。
— DavidG 2014

回答:

144

縮小されたBootstrapjsファイルとcollapse / transitionプラグインが含まれていますが、ドキュメントには次のように記載されています。

bootstrap.jsとbootstrap.min.jsの両方に、すべてのプラグインが1つのファイルに含まれています。
1つだけ含めてください。

そして

単純な遷移効果の場合は、他のJSファイルと一緒にtransition.jsを1回インクルードします。コンパイルされた（または縮小された）bootstrap.jsを使用している場合、これを含める必要はありません。すでに存在しています。

したがって、それが最小化の問題の問題になる可能性があります。

アクティブクラスの場合、自分で管理する必要がありますが、それは1、2行です。

ブートストラップ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
ソース
2
これは、ページから別のページに移動した場合href（ハッシュではなく、別のリクエストを送信した場合）に機能しますか？
— ブラザード2016
1
単一ページ以外のアプリ/サイトの@Blaszardには、デフォルトでアイテムのactiveクラスが必要navです。
— ピートTNT
私には効きません。リストアイテムがアクティブとして表示されることはありません！？あなたたちがしていることを私は何をしていないのですか？
— user465342 2016
4
それは私にとっては機能せず、追加されますが、次の秒で最初のアクティブなクラスに行くので、ページにとどまりません。誰か助けてください
— sourav78611 2016
9
@Pete TNT-それはまだはっきりしておらず、人々が90％のソロを与え、残りの10％を適用する方法を誰もが知っていると仮定すると非常にイライラします。特に構文を正しく理解するのが難しいシナリオでは。
— デイブ
96

これがアクティブなページを切り替えるための私の解決策でした

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});
— ジョン
ソース
2
これはどこに置けばいいですか？ごめんなさい; JSの新機能：＃
— mrateb 2017
2
これはBootstrap4で正常に機能します。@ Thomas8：これは<script>と</script> tags at the bottom of the html file before the </ body> `タグの間にある必要があります（1つのhtmlファイルにすべてがあると仮定します）。
— alwaysCurious 2018
<script>タグなしでsite.jsに同じものを追加し、$（document）.ready（function（）{$（ 'li.active'）。removeClass（ 'active'）; $（ 'a [href = "'+ location.pathname +'"] '）。closest（' li '）。addClass（' active '）;}）;
— Oracular Man 2018
私にとって、これはブートストラップ3.3.7で機能した唯一のソリューションでした。
— MitchellK
この解決策は最終的に私のために働いた。関数console.log（location.pathname）を追加し、<a href ='foo / bar>に変更すると、<a href='foo/bar>で最後の "/"が欠落していることに気付きました。 '>の場合、この関数は、ナビゲーションバーで右側の「li」をアクティブにするために機能します。
— エミリー
16

「window.location.pathname」には実際のページ名の前のデータ（directory / page.phpなど）も含まれているため、これは完全に機能しました。したがって、実際のナビゲーションバーリンクは、URLにこのリンクが含まれている場合にのみアクティブに設定されます。

$(document).ready(function() {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
});
— ベッテルブルシェ
ソース
5
他のすべてのソリューションはあなた以外は機能しません。私はそれらを1つずつ試しました
— Lynob 2016
14

ブートストラップのバージョン3.3.4では、長いhtmlページでページのセクションを参照できます。クラスまたはIDごとに、body要素を使用したスパイスクロールでアクティブなナビゲーションバーリンクを管理します。

  <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（）では実行されない各リンクが自動的にアクティブになります。

— ジム
ソース
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>
— HakanFıstık
ソース
これは本当に便利ですが、あなたはナビゲーションバー-NAV（ノーマル）と持っている場合、それは動作しません。また、ナビゲーションバーの右第二のリストを。最終的には、クリアされていない2つのアクティブになります
— Karl P
5
「data-toggle」を追加すると、hrefで指定された「#place」にページが移動しません。
— scorpiozj 2017年
実際に更新。@scorpiozjが述べたように。これが追加されると、リンク自体は機能しません
— mrateb 2017
9

アンカーリンクを使用しない場合は、次のようなものを使用できます。

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

Bootstrap 4では、これを使用できます。

$(document).ready(function() {
    $(document).on('click', '.nav-item a', function (e) {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});
— カルロス・クエスタ
ソース
おかげで、他のもの（ブートストラップ3）が機能しなかった理由は
— information_interchange
4

このエレガントなソリューションは私にとってトリックでした。新しいアイデア/提案は大歓迎です。

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

jQueryの「siblings（）」メソッドを使用して、アクセスされたアイテムのみをアクティブに保ち、その兄弟を非アクティブに保つことができます。

— ジェフェリンジョセフ
ソース
2

私は今日これに苦労してきましたが、データトグルはシングルページアプリケーションを使用している場合にのみ機能しました。

私は実際に他のページのPOSTリクエストを行っているコンテンツをロードするためにajaxを使用していないので、最初のjsスクリプトも役に立たなかった。私はこの行でそれを解決します：

var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");
— フェルナンド・アスレイ
ソース
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";
            });
        });
— キリル・シュール
ソース
1

動的に生成されたリストアイテム（WordPress Stack）を使用して、これに少し苦労しました。

これを追加し、それは機能しました： 

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

その場でそれを行います。

— Someguywhocodes
ソース
1

私はこれを使います。短く、優雅で、理解しやすいです。

$(document).ready(function() {
    $('a[href$="' + location.pathname + '"]').addClass('active');
});
— エヴァルダス
ソース
0

アイテムをクリックした後のブートストラップモバイルメニューの折りたたみ解除には、これを使用できます 

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

    $(".navbar-collapse").removeClass("in");
});
— ヌールルアミーン
ソース
0

ブートストラップベアテーマを使用しています。これがサンプルのナビゲーションバーコードです。 これはJavaスクリプトで参照されているため、要素のクラス名->。nav-に注意してください。

/ 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による解決策とは少し異なります。

— リシ
ソース
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を使用している場合、ハッシュはありません。したがって、$ 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>
— マヘシュ
ソース
0

このJavaScriptをメインのjsファイルに追加します。 

$(".navbar a").on("click", function(){
      $(".navbar").find(".active").removeClass("active");
      $(this).parent().addClass("active");
    });
— Md。AbunaserKhan
ソース
3
ソリューションの説明を追加してください。
— sg7 2018
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
ソース
0

私のために働いたブートストラップ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、lampなどを使用して）サイトをテストしていて、サイトがサブフォルダーにある場合、パスは実際には「/somefolder/something.php」なので、取得しないでください。混乱しています。

次のコードを使用するかどうかわからない場合は、正しいlocation.pathnameが何であるかを確認できるようにすることをお勧めします。

$(document).ready(function() {
  alert(location.pathname);
});
— ルカSh
ソース
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");
    }
}

仕組みの例

— futur1st
ソース
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バルカン
ソース
0

Bootstrap 4ではli、アクティブなクラスのアイテムをターゲットにする必要があります。そのためには、の親を見つける必要がありaます。の「ヒットボックス」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');
  });
— ミケランジェロ
ソース
0

最初の5つのソリューションとそれらのさまざまなバリエーションについて試しましたが、うまくいきませんでした。

最後に、これら2つの関数で動作するようになりました。

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

$(document).ready(function() {
    $('a[href="' + location.pathname + '"]').closest('.nav-item').addClass('active'); 
});
— ジュッカS。
ソース
0

navbarコードのすべてのページにheader.phpを使用すると、jqueryが機能せず、アクティブが適用されてから削除されます。簡単な解決策は次のとおりです。

<?php $pageName = "index"; ?>インデックスページおよび同様<?php $pageName = "contact"; ?>にお問い合わせページの すべてのページセット変数

次に、header.phpを呼び出します（つまり、ナビゲーションコードはheader.phpにあります） <?php include('header.php'); >

header.phpで、各nav-linkが次のようになっていることを確認します

<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
ソース
0

私は、ブートストラップ4ナビゲーションバーやその他のリンクグループで使用できるソリューションを探していました。

何らかの理由で、ほとんどのソリューションは機能しませんでした。特に、リンクがクリックされると別のページに移動すると、追加した「アクティブ」は機能しないため、クリック時にリンクに「アクティブ」を追加しようとするソリューションは機能しませんでした。 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はどちらもフルパスを返すため、クエリ文字列の有無にかかわらずすべてのリンクで機能します。他のメニューなどの場合は、親クラスセレクター（ナビゲーションバー）を別のメニューに変更するだけです。

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

最後にもう1つ重要と思われるのは、使用しているjs＆cssライブラリですが、おそらく別の投稿です。これがお役に立てば幸いです。

— スティーブウィットビー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.