4

クリック時にタグ クラスを変更したいと思います。

jsFiddle はこちら: http://jsfiddle.net/9u8Nc/

次の HTML コードを取得します。

<ul class="tags">
  <li> <a href="javascript:void(0)" class="tag">Aventure</a>
    <div class="user-info">
      <p><b>Aventure</b> <br>
        + 2.300 activités</p>
    </div>
  </li>
  <li> <a href="javascript:void(0)" class="tag">Famille</a>
    <div class="user-info">
      <p><b>Famille</b> <br>
        + 1.500 activités</p>
    </div>
  </li>
  <li> <a href="javascript:void(0)" class="tag">Gourmet</a>
    <div class="user-info">
      <p><b>Gourmet</b> <br>
        + 500 activités</p>
    </div>
  </li>
</ul>

をクリックすると、スタイルが変更されます。

もう一度クリックすると、スタイルが元に戻ります。

これを試してみますが、うまくいきません。

$('.tag').click(function() {
    $(this).addClass('active');
});
4

2 に答える 2

4

toggleClass関数を使用できます。

$('.tag').click(function() {
    $(this).toggleClass('active');
});

クリックすると、クラスが設定されていない場合は設定され、設定されている場合は削除されます。

あなたのCSSで、置き換えます

.tag .active

と

.tag.active

as.tag .activeは、両方のクラスを持つ要素には一致しませんが、 classactiveの別の要素内のクラスを持つ要素には一致しませんtag。

デモンストレーション

于 2012-12-02T15:39:05.947 に答える
2

トグルクラスを使用できます

ライブデモ

$('.tag').click(function() {
    $(this).toggleClass('active');
});
于 2012-12-02T15:39:25.140 に答える