Jquery AddClass和RemoveClass

Question

我希望在单击选项卡时添加类和删除类，当第一次单击选项卡时，shopiteminfo_content_mobile_label添加类调用activetab，如果我再次单击选项卡或单击其他选项卡，班级activetab将删除。这样做的原因是因为我希望活动选项卡有一个特殊的CSS。知道怎么做吗？ AddClass和RemoveClass ...谢谢

$(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>

Answer 1

你应该使用toggleClass

$(this).toggleClass("activetab");

如果css类已经存在，这将删除它，如果不存在则添加它。

Answer 2

替换下面的

$(this).removeClass("activetab");
$(this).addClass("activetab");

使用$.fn.toggleClass

$(this).toggleClass("activetab");

  

在集合中的每个元素中添加或删除一个或多个类   匹配的元素，取决于类的存在或   国家论点的价值。

Answer 3

这是你想要的吗？ 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();     
    });



});

Answer 4

只是尝试一下，你可以使用三元运算符 ？： ，也可以称为三元运算符。只需一行代码，检查您的元素是否具有活动类。如果有，则点击删除它，如果它没有，则添加它。这是代码，

HTML：

<div id="mainDiv">Click Here</div>

CSS：

.activeDiv{
    background-color : green;   
}

jQuery：

$("#mainDiv").on("click", function(){
    $(this).hasClass("activeDiv") ? $(this).removeClass("activeDiv") : $(this).addClass("activeDiv")
});

jsFiddle