更改标签上的类

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

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

Demonstration

Answer 2

您可以使用toggleClass

<强> Live Demo

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