web-dev-qa-db-ja.com

ブートストラップ、ナビゲーションタブ、ドロップダウンメニュー。 URIに基づいてアクティブなタブを設定する方法

Bootstrap nav-tabs/dropdown menusコンポーネントをプライマリナビゲーションバーとして使用していますが、着信URIに基づいてアクティブなメニューを設定する方法がわかりません。

ネット上には、特定のdivコンテンツの非表示と表示、または＃記号の操作にナビゲーションタブを使用するさまざまな例/投稿がたくさんありますが、PHP、_SERVER ["REQUEST_URI"]変数を使用して着信URIを読み取りたいだけです。タブをアクティブに設定します。ナビゲーション内のネストされた場所であるかどうかも問題です。

これが私が試したことです：

<ul class="nav nav-tabs" id="supernav">
    <li class="active"><a href="/page1.html" data-toggle="tab"><i class="icon-home" style="margin-top:4px;"></i> Page 1</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 2 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="/page2.html" data-toggle="tab">Home</a></li>
            <li class="divider"></li>
            <li><a href="/page2.2.html" data-toggle="tab">Page 2.2</a></li>
            <li><a href="/page2.3.html" data-toggle="tab">Page 2.3</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 3 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="/page3.html" data-toggle="tab">Home</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu">
                <a href="/page3.2.html" data-toggle="tab">Page 3.2</a>
                <ul class="dropdown-menu">
                    <li><a href="/page3.2.1.html" data-toggle="tab">Page 3.2.1</a></li>
                    <li><a href="/page3.2.2.html" data-toggle="tab">Page 3.2.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="/page4.html" data-toggle="tab">Page 4</a></li>
</ul>

<script>
window.onload=function (e) {
    e.preventDefault();
    $('#supernav a[href="<?=$_SERVER["REQUEST_URI"];?>"]').tab('show');
};
</script>

次に、いくつかのURIの例を示します。

http://abc.com/page1.html
http://abc.com/page2.3.html
http://abc.com/page3.2.2.html

誰かがこれを達成する方法の良い例を私に指摘できますか、それとも私はこのコンポーネントからあまりにも多くを求めていますか？

注：ヘッダーにすべてのbootstrapおよびjqueryリソースをプリロードしました。

phptwitter-bootstrapurinav
5
Vince

私は自分の問題を解決しました。これが目標とそれが達成するために要したことの要約です。

目標：

  1. ナビゲーションバーのルック/フィールが気に入ったので、ナビゲーションバーにbootstrap nav-tabs コンポーネントを使用したかったのです。
  2. 着信URIを解析することにより、「アクティブ」クラスを設定できるようにしたかったのです。
  3. サブナビゲーションも機能させたいと思いました。

最初の投稿に基づく新しいコード：

<ul class="nav nav-tabs" id="supernav">
    <li id="page1"><a href="/page1.html"><i class="icon-home" style="margin-top:4px;"></i> Page 1</a></li>
    <li class="dropdown" id="page2">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 2 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li id="page2_home"><a href="/page2.html">Home</a></li>
            <li class="divider"></li>
            <li id="page2_2"><a href="/page2.2.html">Page 2.2</a></li>
            <li id="page2_3"><a href="/page2.3.html">Page 2.3</a></li>
        </ul>
    </li>
    <li class="dropdown" id="page3">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 3 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li id="page3_home"><a href="/page3.html">Home</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu" id="page3_2">
                <a href="/page3.2.html">Page 3.2</a>
                <ul class="dropdown-menu">
                    <li id="page3_2_1"><a href="/page3.2.1.html">Page 3.2.1</a></li>
                    <li id="page3_2_2"><a href="/page3.2.2.html">Page 3.2.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="page4"><a href="/page4.html">Page 4</a></li>
</ul>

上記のコードでは、

class = "active"

または

data-toggle = "tab"

どこにでも設定できます。

すべてのテンプレートのヘッダーとして使用される静的テンプレートでナビゲーションを作成したかったので、着信URIに基づいて動的に生成されたコードを追加できませんでしたが、必要ないことがわかりました。

訪問者が呼び出す各テンプレートの下部に次のJavascriptコードを追加して、「アクティブ」としてマークするアイテムをnav-listに指示できるようにしました。

/page1.htmlの下部にあるこのスクリプトを使用しました

<script type="text/javascript">
window.onload=function () {
    $('#page1').addClass('active');
};
</script>

/page3.2.2.htmlをアクティブなページとして設定し、その上のすべてのnav lvlsを設定するには、これを行いました

<script type="text/javascript">
window.onload=function () {
    $('#page3').addClass('active');
    $('#page3_2').addClass('active');
    $('#page3_2_2').addClass('active');
};
</script>

これで、ユーザーが私のサイトにアクセスすると、ナビゲーションが静的ファイルから読み込まれ、ページの残りの部分に、アクティブに設定するコンポーネントを設定する動的JavaScriptが含まれます。

また、「アクティブ」タブの下に行が表示されないようにするために、カスタムcssにこの1つの小さな変更を加える必要があることもわかりました。フォント設定のために、おそらく視覚的なものが必要です。

.nav-tabs > li { margin-bottom: -3px; }

私はいくつかのSSを投稿したでしょうが、私の「担当者」はまだ10を超えていません、ハハハ。うまくいけば、これが他の誰かを助けてくれます。バージョン3のbootstrapが出てきて、これをもう一度理解する必要があるとき、神は私たち全員を助けてくれます。8^）P

5
Vince

私はパーティーに少し遅れていますが、この投稿に出くわしたばかりで、さらに2セント追加すると思いました...

基本的に、アクティブなブートストラップのタブ/ピルを設定するために私が見つけた最良の方法は、Javascript/jQueryを使用して、現在のURLをアクティブなリンクのhrefに一致させることです。

したがって、メニューが次のように設定されている場合：

<ul class="nav nav-tabs">
    <li><a href="/page1.html" data-toggle="tab">Page 1</a></li>
    <li><a href="/page2.html" data-toggle="tab">Page 2</a></li>
</ul>

JQueryは次のようになります。

$(document).ready(function() {

    $('.nav-tabs a[href="'+location.href+'"]').parents('li').addClass('active');

});

これは、リンクのhrefの絶対パスを想定していますが、次のようなもので簡単にオーバーライドできます。

$(document).ready(function() {

    var url_parts = location.href.split('/');

    var last_segment = url_parts[url_parts.length-1];

    $('.nav-tabs a[href="' + last_segment + '"]').parents('li').addClass('active');

  });

これが宇宙の誰かに役立つことを願っています！ :)

乾杯！

6
dev7

タブは、サーバーではなくクライアント側でアクティブに設定されます。これは、通常、各タブのすべてのコンテンツが実際にはページの読み込み時にドキュメントに既に存在するためです。単純なタブをクリックすると非表示 1つのタブ、次に表示アンカー要素がリンクするIDを持つタブ。

Bootstrapのタブの最も単純な実装は次のようになります。

<!-- tab navigation -->
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#tab1">Home</a>
    </li>
    <li><a href="#tab2">...</a></li>
    <li><a href="#tab3">...</a></li>
</ul>

<!-- tab contents are inside -->
<div class="tab-content">
    <!-- content of each tab is put inside a tab-pane or tab-pill -->
    <div class="tab-pane active" id="tab1">
        <p>content of tab 1</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>content of tab 2</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>content of tab 3</p>
    </div>
</div>

それだけではありません。次のようにJSを使用してタブをアクティブにする必要があります。

$('ul.nav.nav-tabs > li > a').click(function(e) {
    e.preventDefault();
    $(this).tab('show');
});

質問がどのように構成されているかに基づいて、各Bootstrapコンポーネントが何を表すかをよく見て、それらの適切なユースケースが何であるかを理解するようにしてください。

リクエストに応じて特定のタブを表示することを目的とした場合。コンテンツをラップするdiv要素に'active'クラスを追加するだけです。

そして、これを行うことによってそれを表示させます：

$('tab-pane active').tab('show');

注：あなたがしなければならないのは、毎回適切な場所にアクティブを追加することです。

特にあなたの場合、問題はjQueryにあります。これを書く正しい方法は次のとおりです。

$('#supernav active').tab('show');
1
Igwe Kalu

Www.somedomain.com/pages/xyz/abc/samplepage.htmlのようなページのURLがほとんどないときに、同様の問題に直面していました。

このコードは私の場合、魔法のように機能しました。

    $(document).ready(function() {
        var permalink_nodomain = window.location.pathname;
        $('.nav-tabs a[href="' + permalink_nodomain + '"]').parents('li').addClass('active');
    });

誰かがまだ私のようにこの解決策を探しているかもしれません:)

1
Gouranga Tarafder

PHPを使用してアクティブを設定することは、理想的な方法ではありません。PHPはサーバー側のコードであり、bootstrap isクライアント側のUI。最近、bootstrapを使用するプロジェクトがあり、bootstrapがいかに強力であるかを考えると、同じ問題が非常に厄介であることがわかりました。今後の3.0リリース。

私が修正した方法は、jqueryを使用してリンクタグの一意のIDを参照し、それに基づいてアクティブなタブ値を更新することでした。

つまり、jqueryが行ったのは、アクティブなクラスを削除して、現在クリックされているリンクに割り当てることだけでした。

それでもURLパスを使用したい場合は、PHPでjavascript/jqueryを使用することをお勧めします。その方法については、この記事をご覧ください。 http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

お役に立てば幸いです。

0
devfunkd

Bootstrap 4を使用する

与えられた（HAML）

%nav.nav.nav-pills.flex-column
  %a.nav-link.active{href: '#users', 'data-toggle'=>'pill', role: 'tab'} Users
  %a.nav-link{href: '#deals', 'data-toggle'=>'pill', role: 'tab'} Deals
  %a.nav-link{href: '#facilitators', 'data-toggle'=>'pill', role: 'tab'} Facilitators

これは（Coffeescript）に削減されます

if location.hash
  $('nav.nav-pills a[href="'+location.hash+'"]').tab('show')

Doc： http://v4-alpha.getbootstrap.com/components/navs/#via-javascript

0
Chloe