jquery - 更改标签上的类

Question

我想在点击时更改标签类别。

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>

当我点击 a 时，我想要更改样式。

当我再次点击它时，我想要恢复样式。

尝试这个，但它不起作用。

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

Answer 1

您可以使用toggleClass功能:

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

当您单击时，如果未设置类，则会设置该类；如果已设置，则会将其删除。

在你的CSS中，替换

.tag .active

与

.tag.active

as .tag .active 与具有两个类的元素不匹配，但与类 tag 的另一个元素中具有类 active 的元素匹配.

Demonstration