58

Twitter ブートストラップを使用して、メイン ナビゲーションの li 部分に対してアクティブなクラスを開始する必要があります。自動的に。Rubyではなくphpを使用しています。

サンプルナビゲーション:

<ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/forums">Forums</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/faqs.php">FAQ's</a></li>
    <li><a href="/item.php">Item</a></li>
    <li><a href="/create.php">Create</a></li>
</ul>

ブートストラップ コードは次のとおりです。

<li class="active"><a href="/">Home</a></li>

したがって、アクティブなクラスを現在のページに追加する方法を理解する必要があります。スタックのほぼすべての回答を調べましたが、本当の喜びはありません。

私はこれで遊んだ：

/*menu handler*/
$(function(){
    var url = window.location.pathname;  
    var activePage = url.substring(url.lastIndexOf('/')+1);
    $('.nav li a').each(function(){  
        var currentPage = this.href.substring(this.href.lastIndexOf('/')+1);

        if (activePage == currentPage) {
            $(this).parent().addClass('active'); 
        } 
    });
})

しかし、喜びはありません。

4

16 に答える 16

130

ブートストラップ 3 の場合:

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

アップデート

ブートストラップ 4 の場合:

var url = window.location;
// Will only work if string in href matches with location
$('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.navbar-nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');
于 2012-10-18T08:48:54.273 に答える
37

最終的に修正することができました：

/*menu handler*/
$(function(){
  function stripTrailingSlash(str) {
    if(str.substr(-1) == '/') {
      return str.substr(0, str.length - 1);
    }
    return str;
  }

  var url = window.location.pathname;  
  var activePage = stripTrailingSlash(url);

  $('.nav li a').each(function(){  
    var currentPage = stripTrailingSlash($(this).attr('href'));

    if (activePage == currentPage) {
      $(this).parent().addClass('active'); 
    } 
  });
});
于 2012-07-18T10:32:57.333 に答える
30

Bootstrap では JavaScript はまったく必要ありません。

 <ul class="nav">
     <li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
     <li><a data-target="#" data-toggle="pill" href="#users">Users</a></li>
 </ul>

メニュー項目が選択された後にさらにタスクを実行するには、ここの他の投稿で説明されているように JS が必要です。

お役に立てれば。

于 2013-05-16T20:44:57.880 に答える
13

あなたが置くなら 

data-toggle="pill"

タグでは、自動的に機能するはずです。

http://twitter.github.com/bootstrap/javascript.html#tabs

マークアップの下で読む

于 2013-02-12T21:02:41.890 に答える
10

これは、アクティブなメイン ドロップダウンとアクティブな子を含めて、私にとってはうまくいきました (422 のおかげです)。

$(document).ready(function () {
    var url = window.location;
    // Will only work if string in href matches with location
    $('ul.nav a[href="' + url + '"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
    $('ul.nav a').filter(function () {
        return this.href == url;
    }).parent().addClass('active').parent().parent().addClass('active');
});
于 2013-04-28T17:06:47.147 に答える
8

ルートとアクションで MVC フレームワークを使用している場合:

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

Christian Landgren によるこの回答に示されているように: https://stackoverflow.com/a/13375529/101662

于 2013-06-26T13:45:29.193 に答える
6

これを試して。

// Remove active for all items.
$('.page-sidebar-menu li').removeClass('active');

// highlight submenu item
$('li a[href="' + this.location.pathname + '"]').parent().addClass('active');

// Highlight parent menu item.
$('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active');
于 2013-12-26T06:57:01.173 に答える
2

Angulajs で Boostrap を使用している場合に備えて: これは私にとっては機能する単純なディレクティブです (Kam が引用した data-toggle は Angular-ui に含まれていないため)。希望が助けになります。

app.directive("myDataToggle", function(){
    function link(scope, element, attrs) {
        var e = angular.element(element);
        e.on('click', function(){
            e.parent().parent().children().removeClass('active');
            e.parent().addClass("active");
        })
    }
    return {
        restrict: 'A',
        link: link
    };
});

<ul class="nav nav-sidebar">
    <li><a href="#/page1" my-data-toggle>Page1</a></li>
    <li><a href="#/page2" my-data-toggle>Page2</a></li>
    <li><a href="#/page3" my-data-toggle>Page3</a></li>
</ul>
于 2014-09-24T21:30:09.593 に答える
1

ソリューションはシンプルで、サーバー側や ajax は必要ありません。必要なのは jQuery と Bootstrap だけです。idすべてのページで、bodyタグに を追加します。それを使用しidて、ページ名 (タグの値) を含むタグを見つけます。

例：

page1.html

<body id="page1">
    <ul class="nav navbar-nav">
        <li><a href="page1.html">Page1</a></li>
        <li><a href="page2.html">Page2</a></li>
    </ul>
    <script src="script.js"></script>
</body>

page2.html

<body id="page2">
    <ul class="nav navbar-nav">
        <li><a href="page1.html">Page1</a></li>
        <li><a href="page2.html">Page2</a></li>
    </ul>
    <script src="script.js"></script>
</body>

script.js

<script>
    $(function () {
        $("#page1 a:contains('Page1')").parent().addClass('active');
        $("#page2 a:contains('Page2')").parent().addClass('active');
     });
</script>

ベンに感謝します！ユーチューブ

于 2015-03-08T19:11:23.923 に答える
0

これは完全な Twitter ブートストラップの例で、クエリ文字列に基づいてアクティブ クラスを適用します。

正しい解決策を得るために従うべきいくつかの手順:

1) 最新の jquery.js および bootstrap.js JavaScript ファイルを含めます。

2) 最新の bootstrap.css ファイルをインクルード

3) js でクエリ文字列変数の値を取得するための querystring-0.9.0.js を含めます。

4) HTML:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="active">
          <a href="#?page=0">
            Home
          </a>
        </li>
        <li>
          <a href="#?page=1">
            Forums
          </a>
        </li>
        <li>
          <a href="#?page=2">
            Blog
          </a>
        </li>
        <li>
          <a href="#?page=3">
            FAQ's
          </a>
        </li>
        <li>
          <a href="#?page=4">
            Item
          </a>
        </li>
        <li>
          <a href="#?page=5">
            Create
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

スクリプト タグ内の JQuery:

$(function() {
    $(".nav li").click(function() {
        $(".nav li").removeClass('active');
        setTimeout(function() {
            var page = $.QueryString("page");
            $(".nav li:eq(" + page + ")").addClass("active");
        }, 300);

    });
});

完全なビンを作成したので、ここをクリックしてください http://codebins.com/bin/4ldqpaf

于 2012-07-18T07:05:29.483 に答える
0

これらのどれも私にとってはうまくいきませんでした。私の Bootstrap セットアップは別のページにナビゲートし (クリック アクションでは実行できませんが、新しいページへのナビゲーションでアクティブなクラスが削除されます)、URL が正確に一致しません。例外ベースの状況に基づいて、これが私がしたことです。それが他の人に役立つことを願っています:

//Adding the active class to Twitter bootstrap navs, with a few alternate approaches

$(document).ready(function() {
  var rawhref = window.location.href; //raw current url 
  var newpage = ((window.location.href.match(/([^\/]*)\/?$/)[1]).substring(1)); //take only the last part of the url, and chop off the first char (substring), since the contains method below is case-sensitive. Don't need to do this if they match exactly.
  if (newpage == 'someNonMatchingURL') {  //deal with an exception literally
    newpage = 'matchingNavbarText'
    }
  if (rawhref.indexOf('somePartofURL') != -1) { //look for a consistent part of the path in the raw url to deal with variable urls, etc.
    newpage = "moreMatchingNavbarText"
    }
  $(".nav li a:contains('" + newpage + "')").parent().addClass('active'); //add the active class. Note that the contains method requires the goofy quote syntax to insert a variable.

});
于 2013-01-25T02:28:31.407 に答える