Jquery AddClass and RemoveClass
Jquery AddClass and RemoveClass
我希望在单击选项卡时添加类并删除类,第一次单击选项卡时,shopiteminfo_content_mobile_label
添加类调用activetab
,如果我再次单击选项卡或单击其他选项卡,类activetab
将被删除。这样做的原因是因为我希望活动选项卡具有特殊的 css。知道如何做到这一点吗?添加类和删除类...谢谢
$(function () {
$('.shopiteminfo_content_mobile_label').click(function () {
$(this).removeClass("activetab");
$(this).addClass("activetab");
$(this).next('.shopiteminfo_content_mobile_content').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
$('.shopiteminfo_content_mobile_label').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
});
.shopiteminfo_content_mobile_container {
position:relative;
clear:both;
font-family:'Raleway';
margin-bottom:10px;
color:#000;
}
.shopiteminfo_content_mobile_container li{
display: block;
text-align: center;
text-decoration: none;
list-style:none;
color: #888;
border: 1px solid #ddd;
background: #fff;
cursor:pointer;
}
.shopiteminfo_content_mobile_label{
cursor:pointer;
display:block;
text-align:left;
font-size:14px;
color:#000;
padding:10px;
}
.shopiteminfo_content_mobile_content {
display:none;
font-size:15px;
text-align:justify;
background:#fff;
color:#000;
}
.shopiteminfo_content_mobile_content:last-of-type {
}
.shopiteminfo_mobile_productsdetail_inner_container{
width:95%;
border-bottom:1px dashed #ccc;
margin-bottom:10px;
margin-left:10px;
padding-bottom:10px;
}
.shopiteminfo_mobile_productsdetail_inner_container .shopiteminfo_mobile_label{
display:list-item;
list-style:none;
font-weight:bold;
font-size:13px;
padding:3px;
}
.shopiteminfo_mobile_productsdetail_gallery_container{
padding:0px 10px 10px 10px;
}
.shopiteminfo_mobile_productsdetail_gallery_container img{
width:auto;
height:auto;
display:block;
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
}
.shopiteminfo_mobile_productsdetail_galleryname{
background:#09c;
color:#fff;
text-transform: uppercase;
padding:10px;
text-align:center;
margin-top:5px;
width:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shopiteminfo_content_mobile_container">
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">A</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">B</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">C</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
</div>
你应该使用toggleClass
$(this).toggleClass("activetab");
这将删除 css 类(如果它已经存在)或添加它(如果不存在)。
这是你想要的吗?http://jsfiddle.net/fh6tg75s/2/
$(function () {
$('.shopiteminfo_content_mobile_label').click(function () {
$(this).next('.shopiteminfo_content_mobile_content').slideToggle();
$(this).parent().siblings().children().next().slideUp();
$(this).toggleClass("activetab");
$('.shopiteminfo_content_mobile_label').not(this).removeClass("activetab");
return false;
});
$('.shopiteminfo_content_mobile_label').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
});
替换以下内容
$(this).removeClass("activetab");
$(this).addClass("activetab");
使用$.fn.toggleClass
$(this).toggleClass("activetab");
在 匹配的元素,具体取决于类的存在或 状态参数的值。
只是为了尝试一下,你可以使用三元运算符?:也可以称为三元if。只需一行代码即可检查您的元素是否具有活动类。如果有,请单击将其删除,如果没有,则添加此内容。这是代码,
.HTML:
<div id="mainDiv">Click Here</div>
.CSS:
.activeDiv{
background-color : green;
}
j查询 :
$("#mainDiv").on("click", function(){
$(this).hasClass("activeDiv") ? $(this).removeClass("activeDiv") : $(this).addClass("activeDiv")
});
js小提琴
相关文章:
- Selenium WebDriver and JavaScript change
- removeClass函数没有'工作不正常
- PHP and Javascript functions
- Javascript Return and if/else
- SetTimeout and clearTimeout in Javascript
- lightbox in html 5 and javascript
- TimelineJS and AngularJS
- timeago.js with datatable and PHP
- javascript button ajax and php
- Ajax and Json with Rails
- Combine onload, onresize and onclick
- php布尔值's小写AND大写和数字布尔值'可以接受
- setTimeout and V8
- Jquery post and onclick
- Moment js and IOS
- Rails 3.2 and Paloma gem
- Backbone, TypeScript, and super
- iframe and JavaScript on different pages
- JSON and jQuery Search
- Jquery AddClass and RemoveClass