0

タブのセットがあり、それらに機能を追加したいと思いmouseoverます。この機能をに適用したくありません.active。

マークアップ：

<ul>
    <div class='tab'>my tab</div>
    <div class='tab' data-id='1'>your tab</div>
</ul>

<script>
  $('.tab').on('click',function(){
     $(this).addClass('active');
  });
</script>

私はこれを試しました：

$('.tab').not('.active').on('mouseover', function(){

と

$('.tab:not(.active)').on('mouseover', function(){

しかし、これらはどちらも機能しません。そのアクティブをこの機能から除外するにはどうすればよいですか？

4

1 に答える 1

0

考えられる問題の 1 つは、別のセクションでのクリックに応答して、addClass を介してアクティブを追加していることです。上記の構文はこれを処理しますか?

それが問題です。mouseoverロード時にイベントを追加すると、アクティブなクラスが存在しないため、.not()は何も除外しません。代わりに、ハンドラー自体の内部でクラスを確認する必要があります。

これを試して：

$('.tab').on('mouseover', function() {
    if (!$(this).hasClass("active")) {
        // your code here
        $(this).css("background-color", "#C00");
    }
});

$(".tab:last").addClass("active");

フィドルの例

于 2012-05-26T22:30:41.293 に答える