web-dev-qa-db-ja.com

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

ブートストラップv3があります。

Mynavbarにclass="active"を使用していますが、メニュー項目を押しても切り替わりません。これを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の設定が間違っているのでしょうか？）

javascripthtmltwitter-bootstraptwitter-bootstrap-3
72
KickingLettuce

ドキュメントには次のように記載されていますが、縮小されたBootstrap jsファイルと折りたたみ/移行プラグインが含まれています。

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

そして

単純なトランジション効果を得るには、他のJSファイルと一緒にtransition.jsを含めます。コンパイル済み（または縮小）の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");
});
131
Pete TNT

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

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

ブートストラップのバージョン3.3.4では、長いHTMLページでpgのセクションを参照することができます。 body要素を使用してspy-scrollでアクティブなナビゲーションバーリンクを管理するには、クラスまたはIDで指定します。

  <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（）では表示されないページの対応するリンクセクションをスクロールすると、各リンクが自動的にアクティブになります。

13
jim

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

あなたがする必要があるのは、単に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>
9
user6410107

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

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

Bootstrap 4ではこれを使うことができます。

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

この洗練された解決策は私のためにトリックをしました。新しいアイデアや提案は大歓迎です。

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

JQueryの "siblings（）"メソッドを使用して、アクセスしたアイテムだけをアクティブにし、その兄弟を非アクティブにすることができます。

4
JefferinJoseph

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

私は実際に私が他のページへの投稿要求をしているコンテンツをロードするためにajaxを使っていないので、最初のjsスクリプトも役に立ちませんでした。私はこの行でそれを解決します。

var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");
2
Fernando Asulay

動的に生成されたリストアイテム - WordPressスタックを使用して、私はこれにいくらか苦痛を感じました。

これを追加して、それは働いた：

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

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

1
Someguywhocodes

これがこの問題の解決に役立つことを願っています。

      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
Kirill Shur

私のために働いた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、ランプなどを使って）でテストしていて、あなたのサイトがあるサブフォルダにあるなら、あなたのパスは実際には "/somefolder/something.php"です混乱しました。

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

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

ブートストラップでは、クラス "active"はそのままでは管理されません。あなたの場合はPHPを使っているので、あなたは見ることができます：

phpでHTMLメニューにclass = 'active'を追加する方法

ほとんど自動化する方法であなたを助けるために。

0
Kritner

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
     }
  ?>
0
M61Vulcan

ブートストラップ4では、アクティブなクラスのliアイテムをターゲットにする必要があります。そのためには、aの親を見つける必要があります。 aの 'hitbox'は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
Michelangelo

私はブートストラップベアテーマを使用しています、これがサンプルのナビゲーションバーコードです。これは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
Rishi

項目をクリックした後にブートストラップモバイルメニューの展開を解除するには、これを使用できます。

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

    $(".navbar-collapse").removeClass("in");
});
0
Nurul Amin

このJavaScriptをメインのjsファイルに追加してください。

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

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
Mahesh

私のファイル名は私のナビゲーションバーのタイトルと同じではなかったので、私は一歩前進しなければなりませんでした。つまり、最初のナビゲーションバーのリンクは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');
}
0
Cparello

次の答えはマルチレベルメニューを持っている人たちのためのものです：

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

0
futur1st