jquery单击不同的div并更改颜色并重置其他div颜色
jquery单击不同的div并更改颜色并重置其他div颜色
提问于 2019-08-14 17:59:22
我试着当在div中改变颜色时点击那里，其他链接将他的颜色重置为原始，如果直到点击其他div
I have test for see this, here
.content {
position: relative;
width: 400px;
height: 35px;
line-height: 35px;
margin-top: 7px;
margin-bottom: 7px;
border: 1px solid;
cursor: pointer;
cursor: hand;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content n1" style="background-color:pink;" onclick="$(this).css('background-color','green');">Number 1</div>
<div class="content n1" style="background-color:blue;" onclick="$(this).css('background-color','green');">Number 2</div>
<div class="content n1" style="background-color:orange;" onclick="$(this).css('background-color','green');">Number 3</div>
<div class="content n1" style="background-color:brown;" onclick="$(this).css('background-color','green');">Number 4</div>
如果你能看到测试链接，当我点击将每个div改成绿色时，每次点击的想法只是改变我点击的div的颜色，并将其他div的颜色重置为原始背景颜色。
我不知道我能不能做到，如果你能帮我做到完美，谢谢，致以问候。
Stack Overflow用户
发布于 2019-08-14 18:06:01
一种选择是添加一个具有绿色背景的类(在本例中，类是.greenClass)。单击时，删除所有.content上的类.greenClass，仅在单击的元素上添加类。
$(".content").click(function() {
$(".content").removeClass('greenClass');
$(this).addClass('greenClass');
});.content {
position: relative;
width: 400px;
height: 35px;
line-height: 35px;
margin-top: 7px;
margin-bottom: 7px;
border: 1px solid;
cursor: pointer;
cursor: hand;
}
.greenClass {
background-color: green!IMPORTANT;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content n1" style="background-color:pink;">Number 1</div>
<div class="content n1" style="background-color:blue;">Number 2</div>
<div class="content n1" style="background-color:orange;">Number 3</div>
<div class="content n1" style="background-color:brown;">Number 4</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57492459
复制相关文章
相似问题
腾讯云开发者
