web-dev-qa-db-ja.com

アクティブなクラスをTwitterからnavメニューに設定する方法bootstrap

私はTwitterブートストラップが初めてです。そこで使用するナビゲーションメニューアクティブなクラスを選択したメニューに設定しようとしています。私のメニューは-

<div class="nav-collapse">
  <ul class="nav">
    <li id="home" class="active"><a href="~/Home/Index">Home</a></li>
    <li><a href="#">Project</a></li>
    <li><a href="#">Customer</a></li>
    <li><a href="#">Staff</a></li>
    <li  id="broker"><a href="~/Home/Broker">Broker</a></li>
    <li><a href="#">Sale</a></li>
  </ul>
</div>

私はこれをグーグルで調べた後、次のようなメニューから各ページにアクティブなクラスを設定する必要があることを試しました-

<script>
  $(document).ready(function () {
    $('#home').addClass('active');
  });
</script>

しかし、上記の問題は、デフォルトで選択されているホームメニューを設定することです。その後、常に選択されます。 これを行う他の方法はありますか？ 、またはレイアウトファイル自体にjsを一般化して保持できるのはどれですか？

アプリケーションを実行した後、私のメニューは見えます- enter image description here

他のメニュー項目をクリックすると、次の結果が得られます- enter image description here

そして、インデックスビューとブローカービューに次のスクリプトを追加しました---

<script>
  $(document).ready(function () {
    $('#home').addClass('active');
  });
</script>

<script>
  $(document).ready(function () {
    $('#broker').addClass('active');
  });
</script>

それぞれ。

javascriptjquerycsstwitter-bootstrapmenu
26
Priyanka

これは回避策です。試してみる

<div class="nav-collapse">
  <ul class="nav">
    <li id="home" class="active"><a href="~/Home/Index">Home</a></li>
    <li><a href="#">Project</a></li>
    <li><a href="#">Customer</a></li>
    <li><a href="#">Staff</a></li>
    <li  id="demo"><a href="~/Home/demo">Broker</a></li>
    <li id='sale'><a href="#">Sale</a></li>
  </ul>
</div>

そして、各ページにjsを追加します

$(document).ready(function () {
  $(".nav li").removeClass("active");//this will remove the active class from  
                                     //previously active menu item 
  $('#home').addClass('active');
  //for demo
  //$('#demo').addClass('active');
  //for sale 
  //$('#sale').addClass('active');
});
21
dakait

次のJavaScript\jQueryコードを使用できます。

// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');

<a>の親<li>と<li>の親<ul>をアクティブに設定します。

動作するシンプルなソリューション！

元のソース：

ブートストラップはアクティブクラスをliに追加

72
Leniel Maccaferri

私は同じ問題を抱えていました...すべてのページフッターに含まれる「functions.js」ファイルの「$（document）.ready」部分に以下に示すコードを追加することで解決しました。とても簡単です。表示されているページの現在の完全なURLを取得し、それをアンカーhrefの完全なURLと比較します。同じ場合は、アンカー（li）親をアクティブに設定します。そして、これはアンカーhrefの値が「＃」でない場合にのみ行い、bootstrapはそれを解決します。

$(document).ready(function () {         
    $(function(){
        var current_page_URL = location.href;

        $( "a" ).each(function() {

            if ($(this).attr("href") !== "#") {

                var target_URL = $(this).prop("href");

                    if (target_URL == current_page_URL) {
                        $('nav a').parents('li, ul').removeClass('active');
                        $(this).parent('li').addClass('active');

                        return false;
                    }
            }
        }); }); });
5
Mirko
<div class="nav-collapse">
                <ul class="nav">
                    <li class="home"><a href="~/Home/Index">Home</a></li>
                    <li class="Project"><a href="#">Project</a></li>
                    <li class="Customer"><a href="#">Customer</a></li>
                    <li class="Staff"><a href="#">Staff</a></li>
                    <li class="Broker"><a href="~/Home/Broker">Broker</a></li>
                    <li class="Sale"><a href="#">Sale</a></li>
                </ul>
</div>

次に、ページごとにこれを追加します：

//ホーム

 $(document).ready(function () {
        $('.home').addClass('active');
    });

//プロジェクトページ

$(document).ready(function () {
            $('.Project').addClass('active');
        });

//顧客ページ

 $(document).ready(function () {
                $('.Customer').addClass('active');
            });

//スタッフページ

 $(document).ready(function () {
                $('.Staff').addClass('active');
            });
1
anyavacy

各ページのBODYタグに異なるクラスを追加できます。ホームページでこれを入手できます：

<body class="nav-1-on">

次に、このCSS：

.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a {
     // set your styles here
}

NAV要素：

<ul>
  <li class="nav-1"><a href="#">Home</a></li>
  <li class="nav-2"><a href="#">Services</a></li>
  <li class="nav-3"><a href="#">About</a></li>
  <li class="nav-4"><a href="#">Contact</a></li>
</ul>

または、各ページのBODYにクラスを配置し、jQueryを介してそれを取得し、そのタグに基づいて.activeクラスを正しいnavアイテムに追加します。

1
Billy Moat
<div class="nav-collapse">
                <ul class="nav">
                    <li class="home"><a href="~/Home/Index">Home</a></li>
                    <li class="Project"><a href="#">Project</a></li>
                    <li class="Customer"><a href="#">Customer</a></li>
                    <li class="Staff"><a href="#">Staff</a></li>
                    <li class="Broker"><a href="~/Home/Broker">Broker</a></li>
                    <li class="Sale"><a href="#">Sale</a></li>
                </ul>
</div>

$('ul.nav>li.home>a').click();  // first. same to all the other options changing the li class name
1
Apeto

私はFlask= Bootstrapを使用しています。テンプレートが既にFlaskからパラメータとしてオプションまたは選択肢を受け取っているため、私のソリューションは少し簡単です。

var choice = document.getElementById("{{ item_kind }}");
choice.className += "active";

最初の行、jsコードは要素を取得します。そのため、各要素をidで識別する必要があります。以下に例を示します。 2行目は、アクティブなクラスを追加します。以下のHTML IDを確認できます。

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav"> 
        <li>
            <a id="speed" href="{{ url_for('list_gold_per_item',item_kind='speed',level='2') }}">
                <h2>Speed</h2>
            </a>
        </li>
        <li>
            <a id="life" href="{{ url_for('list_gold_per_item',item_kind='life',level='3') }}">
                <h2>Life</h2>
            </a>
        </li>
    </ul>
</div>
0
user83655
(function (window) {
bs3Utils = {}
bs3Utils.nav = {
    activeTab: function (tabId) {
        /// <summary>
        /// 设置需要展现的tab
        /// </summary>
        /// <param name="tabId"></param>
        $('.nav-tabs a[href="#' + tabId + '"]').tab('show');
    }
}
window.bs3Utils = bs3Utils;
})(window);

例：

var _actvieTab = _type == '0' ? 'portlet_tab2_1' : 'portlet_tab2_2';
            bs3Utils.nav.activeTab(_actvieTab);
                        <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#portlet_tab2_1" data-toggle="tab">箱-单灯节点 </a>
                        </li>
                        <li>
                            <a href="#portlet_tab2_2" data-toggle="tab">箱-灯组节点 </a>
                        </li>

                    </ul>
0
YanZhiwei

単一ページのサイトの場合、以下が使用したものです。クリックされた内容に基づいてアクティブな要素を設定するだけでなく、最初のページの読み込み時にURLロケーション内のハッシュ値をチェックします。

$(document).ready(function () {

    var removeActive = function() {
        $( "nav a" ).parents( "li, ul" ).removeClass("active");
    };

    $( ".nav li" ).click(function() {
        removeActive();
        $(this).addClass( "active" );
    });

    removeActive();
    $( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" );

});
0
bchr02
$( ".nav li" ).click(function() {
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });

これをチェックしてください。

0
Hardik Gajjar

メニュー項目がページの他のセクションに単純にジャンプする単一ページのサイトの場合、この簡単な解決策は私にとってうまくいきます：

$('.nav li').on('click', function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
  });
0
Luke Green