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>

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

当我再次单击它时，我想要返回样式。

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

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

Answer 1

您可以使用toggleClass功能：

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

单击时，如果未设置，则设置类，如果已设置，则将其删除。

在你的 CSS 中，替换

.tag .active

和

.tag.active

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

示范

Answer 2

您可以使用切换类

现场演示

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