2

Web サイトに Bootstrap のナビゲーション バーを使用しています。ナビゲーション バーを独自の HTML ページに分割しました。ページが読み込まれると、navbar.html ページが JQuery で読み込まれます。ユーザーがたとえば page2 をクリックすると、「Page2」であるはずの「ホーム」リンクがアクティブとして表示されます。

javascript、jquery、またはブートストラップ マジックを使用して、page2 リンクのクラスを「アクティブ」に切り替える簡単な方法はありますか?

navbar.html

<ul class="nav">
    <li class="active"><a href="#l">Home</a></li>
    <li><a href="#">page2</a></li>
<li><a href="#">page3</a></li>
</ul>

ページ2のjquery

<script>
    jQuery(function(){
        $('#nav').load('nav.html');
    });

    jQuery(function(){
        $('.nav a:contains("page2")').addClass('active');
    });
</script>
4

5 に答える 5

6

jQuery の使用:

$('.nav a:contains("page2")').addClass('active');

または、クラスを親要素に追加するには ( li):

$('.nav a:contains("page2")').parent().addClass('active');

実際の例:

http://jsfiddle.net/BDTnj/

于 2013-05-08T17:33:53.803 に答える
2

これを使って：$('.nav a:contains("page2")').tab('show');

于 2013-11-22T14:46:17.277 に答える
1

したがって、問題は、navbar コンテンツが page2 に別のファイルとしてロードされ、.addClass が page2 にあったことでした。html タグが見つかりませんでした。ナビゲーション バーにアクティブなリンクを表示させるために、ナビゲーション バー$('.nav a:contains("page2")').parent().addClass('active');を読み込むコードを追加しました。

ページ2：

<script>
jQuery(function(){
    $('#nav').load('nav.html', function() {
        $('.nav a:contains("Home")').parent().addClass('active');
    })
});
</script>
于 2013-05-08T19:27:54.763 に答える
1

価値のあるものとして、私は Bootstrap で Backbone を使用しています。これが私の解決策です (明確にするために変数の名前を変更しています)。

var AppRouter = Backbone.Router.extend({
routes: {
    '':                 'list',
    'menu-items/new':   'itemForm',
    'menu-items/:item': 'itemDetails',
    'orders':           'orderItem',
    'orders/:item':     'orderItem'
},

initialize: function  () {
    // [snip]

    this.firstView = new FirstView();
    this.secondView = new SecondView();
    this.thirdView = new ThirdView();

    this.navMenu = {
        firstViewMenuItem:  $('li#first-menu-item'),
        secondViewMenuItem: $('li#second-menu-item'),
        thirdViewMenuItem:  $('li#third-menu-item'),
        reset:              function() {
            _.each(this, function(menuItem) {
                if (!_.isFunction(menuItem) && menuItem.hasClass('active')) {
                    menuItem.removeClass('active');
                    return true;
                }
            });
            return this;
        }
    };
},
// [snip]

ルーターのコールバック内で、既存の「アクティブな」メニュー クラスをすべて削除し、選択したものを「アクティブ」に設定します。

// [snip]
list: function () {
    $('#app').html(this.firstView.render().el);
    this.navMenu.reset().firstViewMenuItem.addClass('active');
},
// [snip]
于 2013-07-11T16:37:12.667 に答える
-1

サーバー側のテクノロジーが の場合、この回答が役立つasp.net-mvc場合があります。

于 2013-07-11T18:44:59.333 に答える