0

リストの 1 つだけからクラス ="active" を削除する方法を理解するために、いくつかの問題が発生しています。

ナビゲーションバーがあります:

<div class="container">
  <ul class="nav">
    <li class="active"><a href="#"></a>Home</li>
    <li><a href="#"></a>About</li>
    <li><a href="#"></a>Contact</li>
  </ul>
</div>

ホーム内にもメニューがあります。

<div class="container_2">
  <ul>
    <li class="left-main-list active"><a href="#">Subject 1</a></li>
      <ul class="list-in-list">
        <li><a href="#">Sub subject 1</a></li>
        <li><a href="#">Sub subject 2</a></li>
      </ul>
    <li class="left-main-list><a href="#">Subject 2</a></li>
    <li class="left-main-list><a href="#">Subject 3</a></li>
  </ul>
</div>

ホームページでメニューをブラウズしているときに、アクティブなリスト項目クラスをクリックするとアクティブに変更したいので、次のjQueryコードを用意しました:

$(document).ready(function() {

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

 });

これは私のメニューで機能し、クラスは現在のものに変更されますが、不要なナビゲーションバークラスも削除されます。:)

私は次のようなことを試しました：

$(document).ready(function() {

    $('.left-main-list').click(function() {
       $('.left-main-list li').removeClass('active'); 
       $(this).addClass('active'); 
    });

});

「.left-main-list li」と「li.left-main-list」を試しましたが、成功しませんでした。

この質問への回答は素晴らしいです。私の質問 (今回) が以前のものよりも正確であることを願っています。:)

/明細書

ps: サブ サブジェクトとメイン サブジェクトを同時にアクティブにして、そのサブ サブジェクトのアクティブ クラスを削除することはできますか?

4

5 に答える 5

3

ホームページのメニューをブラウズしているときに、アクティブなリスト項目のクラスをクリックしたときにアクティブに変更したい

li次のように、関連する 内のをターゲットにするだけですdiv。

$(document).ready(function() {
    var $listItems = $('div.container_2 li');

    $listItems.click(function() {
        $listItems.removeClass('active'); 
        $(this).addClass('active'); 
    });
 });

DEMO -li内.container_2のみ

サブ サブジェクトとメイン サブジェクトを同時にアクティブにして、サブ サブジェクトのアクティブ クラスを削除することはできますか?

次のように、jQuery のparent()を使用できるコンテナーを引き続きターゲットにします。

$(document).ready(function () {
    $('div.container_2 li').click(function () {
        var $this = $(this);
        var $children = $this.parent().find('li');

        $children.removeClass('active');
        $this.addClass('active');
    });
});

デモ-parent()アクティブなメニューとサブメニューを許可するために使用するが、メイン メニューが変更されたときは許可しない

これをより動的にして、異なるメイン メニュー要素内にあるサブ メニューを切り替えるときに、チェーンを上るアイテムのアクティブ化を追加する可能性を検討しました。

ulネストされたs のHTML を修正して、ネストされたuls がliアッパーのすぐ内側ではなく s 内にあるようにulすると、完全に動的な実装を行うことができます。

HTML を次のように仮定します。

<div class="container">
    <ul class="nav">
        <li class="active"><a href="#"></a>Home</li>
        <li><a href="#"></a>About</li>
        <li><a href="#"></a>Contact</li>
    </ul>
</div>
<div class="container_2">
    <ul>
        <li class="left-main-list active"><a href="#">Subject 1</a>

        </li>
        <li>
            <ul class="list-in-list">
                <li><a href="#">Sub subject 1</a>

                </li>
                <li><a href="#">Sub subject 2</a>

                </li>
                <li>
                    <ul class="list-in-list">
                        <li><a href="#">Sub subject 1</a>

                        </li>
                        <li><a href="#">Sub subject 2</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="left-main-list"><a href="#">Subject 2</a>

        </li>
        <li class="left-main-list"><a href="#">Subject 3</a>

        </li>
    </ul>
</div>

ここで、次のスクリプトを使用して、サブ メニューから別のメイン メニュー項目内にある別のサブ メニューに変更するときに、サブ メニュー項目の親をアクティブにすることもできます。

$(document).ready(function () {
    $('div.container_2 li>a').click(function () {
        var $this = $(this);
        var $relatedElements = $this.parents('ul').find('li');

        if($this.hasClass('active')){
            return;
        }

        $relatedElements.removeClass('active');
        $this.parent('li').addClass('active');

        var $parents = $this.parents('li');

        $parents.each(function(){
            $(this).not($this.parent()).prev().addClass('active');
        });
    });
});

デモ- チェーンのようなアクティベーション

これには、ここから始めるためのすべての可能な例が含まれている必要があると思います。

お役に立てれば。

于 2013-03-28T21:19:30.530 に答える
1

これを試して：

$("li").click(function() {
    $(this.parentNode).children("li").removeClass("active");
    $(this).addClass("active");
});

これは、クリックした要素の兄弟にのみ影響します。

于 2013-03-28T21:19:08.840 に答える
0

どうですか

$('li').on ('click', function (){ $(this).addClass ('active').siblings ('li').removeClass ('active'); })

于 2013-03-28T21:26:47.027 に答える
0 
$('.left-main-list').click(function() {   
   $('.left-main-list').removeClass('active');
   $(this).addClass('active'); 
});
于 2013-03-28T21:18:11.207 に答える
0

あなたが探しているのはこれだと思います：

$(document).ready(function() {
   $('li').click(function() {
    $('li.left-main-list').removeClass('active'); 
    $(this).addClass('active'); 
  });
});
于 2013-03-28T21:23:53.753 に答える