30

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を一般化して保持できるのはどれですか?

アプリケーションを実行した後、私のメニューは次のようになります - ここに画像の説明を入力

他のメニュー項目をクリックすると、次の結果が得られます- ここに画像の説明を入力

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

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

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

それぞれ。

4

13 に答える 13

29

これは回避策です。試す

<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');
});
于 2013-02-26T06:36:34.820 に答える
5

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

$(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;
                    }
            }
        }); }); });
于 2015-11-27T23:59:06.157 に答える
1

各ページの 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 クラスを正しいナビゲーション項目に追加することもできます。

于 2013-02-26T15:28:38.037 に答える
1 
<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');
            });
于 2014-07-13T16:11:52.233 に答える
1 
<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
于 2016-08-16T17:32:14.500 に答える
0 
$( ".nav li" ).click(function() {
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });

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

于 2016-08-05T11:10:58.537 に答える
0 
(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>
于 2015-06-18T01:39:35.970 に答える
-1

という名前のulセクションにカスタムクラスを追加しましたtarget-active

<ul class="nav navbar-nav target-active">
    <li><a href="/">HOME</a></li>
    <li><a href="find-truck">FIND A TRUCK</a></li>
    <li><a href="our-service">OUR SERVICES</a></li>
    <li><a href="about-us">ABOUT US</a></li>
</ul>

各 li タグをクリックして別の場所または同じ場所から新しいページを取得する場合、jquery removeClass 関数を追加する必要はありません。

各ページに単純な 1 行の jquery コードを追加して、目的の結果を得る

1つ目のリンクページ

$(function(){
    $(".target-active").find("[href='/']").parent().addClass("active");
});

2つ目のリンクページ

$(function(){
    $(".target-active").find("[href=find-truck]").parent().addClass("active");
});

3つ目のリンクページ

$(function(){
    $(".target-active").find("[href=our-service]").parent().addClass("active");
});

4番目のリンクページ

$(function(){
    $(".target-active").find("[href=about-us]").parent().addClass("active");
});
于 2015-10-06T08:16:08.333 に答える