Question

I would like to change a tag class on click.

jsFiddle is here: http://jsfiddle.net/9u8Nc/

Got this HTML code:

<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>

When I click on a I want the style change.

When I click again on it, I would like the style back.

Try this but it do not work.

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

Answer 1

You can use the toggleClass function :

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

When you click, it sets the class if it isn’t set, or remove it if it’s set.

In your css, replace

.tag .active

with

.tag.active

as .tag .active doesn’t match an element with both classes but an element with class active in another element of class tag.

Demonstration