[英]Add and remove class on click
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...我有一个选项卡菜单,我希望在 onlick 中添加一个
class="selected"
- 然后单击其他选项卡之一,应从当前链接中删除 class,然后将其添加到我的链接中点击...
I've tried this but didnt work我试过这个但没用
$('.tab-links a').click(function(){
$(this).toggleClass('selected');
});
And the HTML:和 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>
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. this
是单击事件toggleClass
方法的目标,如果 class 不存在,则添加它,否则将其删除。
Therefore when you say $(this).toggleClass('selected');
因此,当你说
$(this).toggleClass('selected');
, The class is added or removed only on the element that was clicked which is clearly not what you want. , class仅在被单击的元素上添加或删除,这显然不是您想要的。
Using pure javascript:使用纯 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 codepen http://codepen.io/8eni/pen/MaGVrq
$('.tab-links a').click(function(){
$('.tab-links a').removeClass('selected')
$(this).addClass('selected');
});
The given below is awesome and simplest way for addClass and RemoveClass onClick using pure Javascript.下面给出的是使用纯 Javascript 的 addClass 和 RemoveClass onClick 的真棒和最简单的方法。
Step: 1 - write the following code in.html file步骤: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
Step: 2 - Write the following in.js file步骤:2 - 编写以下 in.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 = '';
}
}
};
Step: 3 - Write the following in.css file步骤:3 - 在.css 文件中写入以下内容
.active {
color: red;
}
This works for me.这对我有用。 try to use this code.
尝试使用此代码。
$('.footer-right .cu-btn-ol-round').click(function (e) {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
}
else {
$(this).addClass("active");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.