点击添加和删除类

我有一个标签菜单，我想要添加一个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>

来源

2011-08-16 nuffsaid

*不起作用*表示*该类仅在点击链接中切换*？ –

@ÁlvaroG.Vicario是的，这就是他的意思。下面的答案也不起作用。我也在寻找解决方案。 –

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

this是点击事件的目标 toggleClass方法增加一类，如果它不存在，否则删除它。

因此，当你说$(this).toggleClass('selected');，该班被添加或者被点击这显然不是你想要的元素只能除去。

来源

2011-08-16 11:46:25

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

来源

2011-08-16 11:49:39 SLB

使用此代码，该类将仅添加到被单击的元素上，并且不会影响其他正在讨论的元素。 –

你是对的。 – SLB

使用纯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

来源

2015-10-30 16:32:58

下面给出的是使用纯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; 
}

来源

2017-02-07 16:28:00

点击添加和删除类

回答

相关问题