6

残念ながら、リンクからクラスを追加および削除する方法についてのチュートリアルを探していましたが、成功しませんでした。これに関する以前のすべての質問は私にある程度の理解を与えましたが、私が達成したい結果を私に与えませんでした。

リンクがクリックされたときにクラスを追加および削除することにより、ナビゲーションをアクティブな状態にしようとしています。

これが私がJavaScriptに関して持っているものです：

$(document).ready(function(){

    //active state  
    $(function() {
        $('li a').click(function(e) {
            e.preventDefault();
            var $this = $(this);
            $this.closest('li').children('a').removeClass('active');
            $this.parent().addClass('active');

        });
    });
});

そしてこれが私のナビゲーションです：

<div id="nav">
    <div id="main-nav" class="center">
        <ul>
            <li><a href="/photography.php">Photography</a></li>
            <li><a href="/web.php">Web</a></li>
            <li><a href="/print.php">Print</a></li>

            <li class="nav-R"><a href="/about.php">About</a></li>
            <li class="nav-R"><a href="/contact.php">Contact</a></li>
        </ul>
    </div><!-- close center -->
</div><!-- close-nav -->
4

4 に答える 4

19

最も近い'子要素から'active'クラスを削除してから、現在の's親liにアクティブクラスを追加します。リストアイテムではなくアンカーにアクティブクラスを保持するという精神で、これはあなたのために機能します：ali

    $('li a').click(function(e) {
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    });

アクティブリンクはアクティブリンクです。常に複数のリンクがアクティブになることはないため、activeクラスの削除について具体的に説明する必要はありません。すべてのアンカーから削除するだけです。

デモ： http： //jsfiddle.net/rq9UB/

于 2011-12-05T00:41:17.833 に答える
1

試す：

$(function() {
    $('li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').find('.active').removeClass('active');
        $this.parent().addClass('active');

    });
});

セレクターは、現在の（$(this)）a要素の親要素を調べてから、その要素の子の中から。を探していましたa。そのa要素にあるのは、クリックしたばかりの要素だけです。

私のソリューションは、代わりに最も近いものに移動し、アクティブな`をul見つけて、element that currently has the class ofそのクラスを削除します。

また、投稿されたように、あなたのアプローチは要素にactiveクラス名を追加することであり、li要素からクラス名を削除しようとしていましたa。私のアプローチでは、を使用していますが、最終行からを削除するだけliで、を使用するように修正できます。aparent()

参照：

于 2011-12-05T00:37:37.037 に答える
0

私はあなたが欲しいと思います：

$this.parents("ul").find("a").removeClass('active');
于 2011-12-05T00:38:34.507 に答える
0

これを試して：

$(function() {
    $('.start').addClass('active');
        $('#main-nav a').click(function() {
        $('#main-nav a').removeClass('active');
        $(this).addClass('active');             
   });
});

クラス.startを最初にクラス.activeにしたいnav要素に追加するだけです。

次に、cssで次のようにクラス.activeを宣言します。

#main-nav a.active {

/* YOUR STYLING */

}
于 2011-12-05T00:41:43.840 に答える