怎样点击这个另一个恢复原色

Question

<div class="e1"><div class="ee"><div class="e2"></div><div class="e3"></div><div class="e4"></div></div><div class="ee1"><div class="e5"></div><div class="e6"></div><div class="e7"></div></div><div class="ee2"><div class="e8"></div><div class="e9"></div><div class="e10"></div><div class="e11"></div><div class="e12"></div></div><div class="ee3"><div class="e8"></div><div class="e9"></div><div class="e10"></div><div class="e11"></div><div class="e12"></div></div></div>如题循环过我想点击这个变颜色，另一个恢复原色 点击两次也会恢复 改怎么写！

Answer 1

你可以控制两个选项卡的父标签，当点击其中一个时候，被点击选项处于激活状态，另一个取消激活状态

类似代码如下：

html:

<div class="item">选项卡-1</div>

<div class="item">选项卡-2</div>

js:

$(".item").on("click",function(){

    $(this).addClass("active").siblings().removeClass("active");

})

你只需控制激活状态下的样式就够了，比如：

.active>div{

   background-color: red;

}