Jquery开关活动类

Jquery switch active class

本文关键字：活动 开关 Jquery      更新时间：2023-09-26

我试图将class和removeClass添加到div mall_alldeal_cat_active中，以指向所选的字母表。然而，当我单击字母表中的一个时，所有div addClass都会一起显示。有谁能帮我检查一下我犯了什么错误吗？

$('.mall_alldeal_cat_title li').click(function(e){
	e.preventDefault();
	var $this = $('.mall_alldeal_cat_title li div');	
	$('.mall_alldeal_cat_title li div').removeClass('mall_alldeal_cat_active');
	$this.addClass('mall_alldeal_cat_active');
  
});
.mall_alldeal_cat_title{
	background:#fff;
	padding-left:30px;
	border-bottom:1px solid #ccc;
}
.mall_alldeal_cat_title li{
	list-style:none;
	display:inline-block;
	padding:10px 10px 5px 10px;
	cursor:pointer;	
}
.mall_alldeal_cat_active{
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
	position:absolute;
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mall_alldeal_cat_title">
                    	<li>A<div class="mall_alldeal_cat_active"></div></li>
                       	<li>B<div class=""></div></li>
                        <li>C<div class=""></div></li>
                        <li>D<div class=""></div></li>
                    </div>

您应该使用this，也就是您单击的li，然后在其中找到div。

CCD_ 5仍然与CCD_ 6中的所有div元素匹配。

$('.mall_alldeal_cat_title li').click(function(e){
	e.preventDefault();
	$('.mall_alldeal_cat_title li div').removeClass('mall_alldeal_cat_active');
	$(this).find('div').addClass('mall_alldeal_cat_active');
  
});
.mall_alldeal_cat_title{
	background:#fff;
	padding-left:30px;
	border-bottom:1px solid #ccc;
}
.mall_alldeal_cat_title li{
	list-style:none;
	display:inline-block;
	padding:10px 10px 5px 10px;
	cursor:pointer;	
}
.mall_alldeal_cat_active{
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
	position:absolute;
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mall_alldeal_cat_title">
                    	<li>A<div class="mall_alldeal_cat_active"></div></li>
                       	<li>B<div class=""></div></li>
                        <li>C<div class=""></div></li>
                        <li>D<div class=""></div></li>
                    </div>

选择器正在选择所有li元素。尝试这样的操作来获取li同级并删除它们的类，然后只将其添加到当前类中。

$('.mall_alldeal_cat_title li').click(function(e){
	e.preventDefault();
	var $this = $(this);
	$this.siblings().find('div').removeClass('mall_alldeal_cat_active');
	$this.find('div').addClass('mall_alldeal_cat_active');
  
});
.mall_alldeal_cat_title{
	background:#fff;
	padding-left:30px;
	border-bottom:1px solid #ccc;
}
.mall_alldeal_cat_title li{
	list-style:none;
	display:inline-block;
	padding:10px 10px 5px 10px;
	cursor:pointer;	
}
.mall_alldeal_cat_active{
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
	position:absolute;
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mall_alldeal_cat_title">
                    	<li>A<div class="mall_alldeal_cat_active"></div></li>
                       	<li>B<div class=""></div></li>
                        <li>C<div class=""></div></li>
                        <li>D<div class=""></div></li>
                    </div>

您可以使用children（）。

此代码可帮助您。

$('.mall_alldeal_cat_title li').click(function(e){
        e.preventDefault();
        //var $this = $('.mall_alldeal_cat_title li div');  
        $('.mall_alldeal_cat_title li div').removeClass('mall_alldeal_cat_active');
        $(this).children().addClass('mall_alldeal_cat_active');
    });
相关文章：