9

メニューの要素をクリックすると、クラス[アクティブ]を追加しようとしています。次に、メニューの新しい項目をクリックしたときにそのクラス[active]を削除し、[active]クラスを追加します。

私はもう試した $(this).removeClass("active").addClass("active");

$(this).toggleClass("active");

基本的に私はhover（）関数を作ろうとしていますが、クリックでも同じです。

編集：HTMLを修正

<ul class="menu">
    <li><span>Three</li>
    <li><span>Two</li>
    <li><span>One</li>
</ul>
4

3 に答える 3

25

一度に1つの要素のみを想定activeし、DOM階層についての知識はありません。

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

DOM階層がわかっている場合は、より効率的なオプションを利用できます。

たとえば、全員が兄弟である場合は、次を使用できます。

$(this).addClass('active').siblings('.active').removeClass('active');
于 2012-11-08T19:09:29.130 に答える
9

デモ—実例。

マークアップを修正しました：

<ul class="menu">
  <li><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

LIタグにactiveクラスを持たせたいと仮定します。

<script>
$('.menu li').on('click', function(){
    $(this).addClass('active').siblings().removeClass('active');
});
</script>
于 2012-11-08T19:09:36.950 に答える
1

この小さなライブラリを試してみてください。ネイティブjsでクラスを切り替えることができますか？のようになります

var menu = document.querySelector('.menu');
menu.addEventListener('click', function () {
  Elemental.toggleClass(this, 'active');
})

存在に応じてクラスを追加または削除します。

于 2019-04-10T08:31:37.153 に答える