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是点击事件的目标 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

添加＆＃39;有效＆＃39; onClick on class，同时删除＆＃39; active＆＃39;来自其他按钮的课程
切换课程onclick

Answer 3

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

Answer 4

以下给出了使用纯Javascript的addClass和RemoveClass onClick的最棒和最简单的方法。

步骤：1 - 在.html文件中编写以下代码

//... code here
<h1 id="kiran" onclick="myFunction(e)">A</h1>
<h1 id="kiran" onclick="myFunction(e)">B</h1>
<h1 id="kiran" onclick="myFunction(e)">C</h1>
<h1 id="kiran" onclick="myFunction(e)">D</h1>
//... code here

步骤2 - 在.js文件中写下以下内容

function handleClick(e) {
        var curr = e.target.textContent;
        var elem = document.querySelectorAll('#kiran');
        for (var i = 0; i < elem.length; i++) {
            if (elem[i].textContent === curr) {
                elem[i].className = 'active';
            } else {
                elem[i].className = '';
            }
        }
    };

步骤：3 - 在.css文件中写下以下内容

.active {
  color: red;
}

单击时添加和删除类

4 个答案: