实现点击对兄弟级取消背景颜色，对自己加上背景颜色。

程序侯

于 2017-07-18 14:20:42 发布

阅读量918

点赞数

分类专栏： JQ 文章标签： JQ

本文链接：https://blog.youkuaiyun.com/weixin_38544803/article/details/75303793

版权

JQ 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery（JQ）简洁地处理点击事件，当点击某个元素时，取消其兄弟元素的背景颜色，并为点击的元素本身添加背景颜色。原先的方法是为每个元素分配不同的class，现在优化为统一的class处理，大大减少了代码量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示点击News时加一层灰色背景而把Amplifiers的灰色背景去掉！！

第一次做的时候并没有发现还有兄弟级的这一说法所以我傻傻的给她们都加了class，

css

.top_bg{
      background：#878787
}

$('.top_two').click(function(){
		$('.top_one,.top_three').removeClass('top_bg');
		
		$('.top_two').addClass('top_bg');
		
	});
	$('.top_three').click(function(){
		$('.top_one,.top_two').removeClass('top_bg');
		
		$('.top_three').addClass('top_bg');
		
	});
	$('.top_one').click(function(){
		$('.top_three,.top_two').removeClass('top_bg');
		
		$('.top_one').addClass('top_bg');
		
	});
 
});

后来才发现不用那么多代码几句就搞定了

一开始都给了class top_one top_two top_three这样，很麻烦

现在把她们都设置为一个class就行

$('.top_two').click(function(){
		
		
		$('.top_two').siblings().removeClass('top_bg');
		$(this).addClass('top_bg');
	});