单击时添加和删除类

Question

我有一个标签菜单,我想要点击添加一个class="selected"- 并点击其他标签之一,该类应该从当前链接中删除,然后添加到我点击的链接...

我试过这个但是没有用

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

和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是click事件toggleClass方法的目标, 如果它不存在则添加一个类,否则删除它.

因此,当你说$(this).toggleClass('selected');,只在被点击的元素上添加或删除类,这显然不是你想要的.

Answer 2

使用纯JavaScript：

function toggleItem(elem) {
  for (var i = 0; i < elem.length; i++) {
    elem[i].addEventListener("click", function(e) {
      var current = this;
      for (var i = 0; i < elem.length; i++) {
        if (current != elem[i]) {
          elem[i].classList.remove('active');
        } else if (current.classList.contains('active') === true) {
          current.classList.remove('active');
        } else {
          current.classList.add('active')
        }
      }
      e.preventDefault();
    });
  };
}
toggleItem(document.querySelectorAll('.link'));

codepen http://codepen.io/8eni/pen/MaGVrq

• 添加“活动”类onClick，同时从其他按钮中删除“活动”类
• 切换类onclick