[英]how to add/remove a class from a link
我正在使用引导程序选项卡,其中有四个。 我希望它们具有不同的颜色,当用户单击它们时它们应该改变,引导程序具有“活动”类,但是它不起作用,因为我为每个选项卡使用不同的颜色,所以我决定使用jquery函数在用户单击选项卡时添加一个类,但是当用户单击另一个时,我不知道如何删除该类。
有没有一种方法可以将两个值传递给函数,一个值来自一个链接,另一个来自另一个链接,所以当我单击汽车时,我想从卡车上删除该类,而当我单击卡车时,从其中删除该类。汽车
的HTML
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Link 1</a></li>
<li><a href="#link2" role="tab" data-toggle="tab">Link 2</a></li>
<li><a href="#link3" role="tab" data-toggle="tab" id="cars">Link 2</a></li>
<li><a href="#link4" role="tab" data-toggle="tab" id="trucks" >Link 3</a></li>
</ul>
的CSS
#cars
{
color: #FFF;
background: #ec7501;
background: -moz-linear-gradient(top, #ec7501 1%, #c46200 56%, #ec7501 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ec7501), color-stop(56%,#c46200), color-stop(100%,#ec7501));
background: -webkit-linear-gradient(top, #ec7501 1%,#c46200 56%,#ec7501 100%);
background: -o-linear-gradient(top, #ec7501 1%,#c46200 56%,#ec7501 100%);
background: -ms-linear-gradient(top, #ec7501 1%,#c46200 56%,#ec7501 100%);
background: linear-gradient(to bottom, #ec7501 1%,#c46200 56%,#ec7501 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec7501', endColorstr='#ec7501',GradientType=0 );
border-top: 2px solid #de9d5b;
border-bottom: 2px solid #a64800;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.activeTab
{
color:#000 !important;
background:#FFF !important;
}
JS根据Ed Cottrell的评论进行编辑,
('#cars, #trucks').on('click', function() {
changeColor($(this)); // passes the element itself
});
function changeColor($elem)
{
$('.activeTab').removeClass('activeTab'); // remove the class from elements that have it
$elem.addClass('activeTab');
}
使用$(selector).removeClass(class)
。 另外,您不应该在jQuery中使用内联onclick
触发器; 而是使用动态绑定。
例:
$('#cars').on('click', function() {
changeColor('cars');
});
$('#some_other_tab').on('click', function() {
$('.activeTab').removeClass('activeTab'); // remove the class from elements that have it
doSomethingElse();
});
编辑:根据您的评论,您需要这样的内容:
$('#cars, #trucks').on('click', function() {
changeColor($(this).prop('id')); // passes the id of the element receiving the click
});
function changeColor(id)
{
$('.activeTab').removeClass('activeTab'); // remove the class from elements that have it
$('#' + id).addClass('activeTab');
}
更简单的是,跳过id的内容:
$('#cars, #trucks').on('click', function() {
changeColor($(this)); // passes the element itself
});
function changeColor($elem)
{
$('.activeTab').removeClass('activeTab'); // remove the class from elements that have it
$elem.addClass('activeTab');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.