3

ご存知かもしれませんが、私は今日 jQuery を学んでいます (他の Web の中でも)。

私が持っている変数が LI 内の A の HREF の内容と一致する場合、LI のクラスをアクティブにきちんと変更しようとしています。

次のように構成されています。

<li><a href="foo.html">Foo</a></li>

「ページ」変数が「foo.html」と等しい場合、li のクラスをアクティブに変更したいと考えています。次のように：

<li class="active"><a href="foo.html">Foo</a></li>

適度に単純な方法があることは知っていますが、私のやり方は完全に間違っているようです!

補足として、これはメニューであり、多数の LI があることを覚えておく価値があります (これは私が失敗した場所です)。

<li class="active"><a href="foo.html">Foo</a></li>
<li><a href="bar.html">Bar</a></li>

どうもありがとう、クリス

4

3 に答える 3

2

ステップ 1: 正しいリンク要素を取得する

aまず、正しいタグ要素を見つける必要があります。次の属性セレクターを使用してそれを行うことができます。

var href = "foo.html";
var a = $("[href='" + href + "']");

ステップ 2: 親リスト項目要素を取得する

parent()次に、関数を使用して直接の親を見つけることができます。

var li = a.parent();

直接の親でない場合はclosest()、提供されたセレクターに一致する最初の祖先を見つけることができる関数を使用できます。例えば：

var li = a.closest("li");

ステップ 3: クラスを変更する

addClass()最後に、関数を使用して任意の要素にクラスを追加できます。

li.addClass("active");

任意の時点でクラスを削除する必要がある場合、または既存のクラスを削除する必要がある場合は、次のremoveClass()関数を使用できます。

li.removeClass("active");

注: すべてのアクティブなリスト要素を「リセット」したい場合は、次の操作を簡単に実行できます。

$("li.active").removeClass("active");

最終結果

これが実際の動作例です

于 2013-04-16T16:18:00.430 に答える
0

質問では明記していませんが、アクティブなクラスを他の LI から削除したいと思われますか?

var li = $('.menuClass li'), // menuClass is whatever the class of your menu is (or #menuId for id)
    page = 'foo.html';

li.each(function () {
    var t = $(this); // better performance
    t.removeClass('active'); // remove active class from all
    if (t.find('a').attr('href') === page) { // if the href equals the value of your page variable, add active class
        t.addClass('active');
    }
});
于 2013-04-16T16:29:42.627 に答える