javascript - Add and remove class on click

Question

I have a tab menu, and i want onlick be be added a class="selected" - and on click on one of the other tabs, the class should be removed from the current link, and then be added to the link i've clicked on...

I've tried this but didnt work

$('.tab-links a').click(function(){
   $(this).toggleClass('selected');
});

And the HTML:

<section class="tabs">
<nav class="tab-links">
  <ul>
    <li>
      <a href="/min+side/Mine+favoritter" class="ajax-tab-fav myoptionstab">MIne favoritter</a>
    </li>
    <li>
      <a href="/min+side/Mine+jobagenter" class="ajax-tab-jobagents myoptionstab">Jobagenter</a>
    </li>
    <li class="last">
      <a href="/min+side/Rediger+bruger" class="ajax-tab-edituser myoptionstab">Indstillinger</a>
    </li>
  </ul>
</nav>
<div class="clear">
  <!---->
</div>

Answer 1

var $links = $('.tab-links a');
$links.click(function(){
   $links.removeClass('selected');
   $(this).addClass('selected');
});

this is the target of the click event toggleClass method adds a class if it is not present else removes it.

Therefore when you say $(this).toggleClass('selected');, The class is added or removed only on the element that was clicked which is clearly not what you want.