0

Twitter Bootstrap フレームワークを使用しており、表示されているページに応じてアクティブなリンクを変更したいと考えています。(これが Stackoverflow に適していない場合は、削除してください)

基本的なナビゲーション メニューの html は次のとおりです。クラス「アクティブ」に注意してください。これにより、アクティブなリンクが強調表示されます。

<ul class="nav">
   <li class="active"><a href="default.aspx">View Programs</a></li>
   <li><a href="addprogram.aspx">Add Programs</a></li>
   <li><a href="contacts.aspx">Contacts</a></li>
</ul>

jQuery コード ... すべての li タグからクラス 'active' を削除し、ページへのリンクを表示して li タグに追加し直します。

    $(document).ready(function () {
        $("ul.nav > li").removeAttr("class");
        $("ul.nav > li a[href*='contacts.aspx']").parent("ul.nav > li").addClass("active");
    });

この知識は私に与えます...

 <ul class="nav">
   <li><a href="default.aspx">View Programs</a></li>
   <li><a href="addprogram.aspx">Add Programs</a></li>
   <li class="active"><a href="contacts.aspx">Contacts</a></li>
</ul>

これは機能しますが、正しい方法ですか？

4

3 に答える 3

6

あなたがしたことは問題ありません。ただし、タグ内の class 属性を削除する代わりに、代わりにこれを行います。将来、複数のクラスで遊ぶ可能性があるからです。

$("ul.nav > li").removeClass("active");
于 2012-10-26T20:15:54.550 に答える
0

それを行うにはたくさんの方法があります...

$(function () {
    // I'd just use removeClass()
    $("ul.nav > li").removeClass("active");

    // And just grab the closest() list-item, just easier to read
    $("ul.nav > li a[href*='contacts.aspx']").closest('li').addClass('active');
});
于 2012-10-26T20:18:28.310 に答える
0

一般に、非常に多くのセレクターがあります。パフォーマンスを向上させるために、それらを避けるようにしてください (気にする場合)。

$("ul.nav > li").removeAttr("クラス");

この行は正しくありません。代わりに私はするだろう

$("ul.nav > li").removeClass("アクティブ");

この行に関して

$("ul.nav > li a[href*='contacts.aspx']").parent("ul.nav > li").addClass("active");

サーバー側で LI をアクティブとしてマークすることはできませんか?

URL から「contacts.aspx」を削除すると、セキュリティ上の問題が発生することに注意してください。

于 2012-10-26T20:20:58.267 に答える