我想在2个div之间切换,以便当我单击其中一个时,其边框和标题变为红色,并且我希望另一个div关闭。因此,就像在他们之间进行选择一样,我不知道我在哪里做错了。我添加了(IF),这样我可以实现它,但是它不起作用请帮助我。
$(".container").on("click" , function(){
$(this).toggleClass("active");
$(".header", this).toggleClass("active2");
if ($(".box1").hasClass("active")) {
$(".box2").removeClass("active");
$("h2", ".box2").removeClass("active2");
}if ($(".box2").hasClass("active")) {
$(".box1").removeClass("active");
$("h2", ".box1").removeClass("active2");
}
});
body{
padding: 3em;
}
.box1, .box2{
padding: 2em;
border: 1px solid silver;
margin-top: 2em;
}
.active{
border-color: red;
}
.active2{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container box1">
<h2 class="header">Boys</h2>
<hr>
<p>Benjamin</p>
<p>David</p>
</div>
<div class="container box2">
<h2 class="header">Girls</h2>
<hr>
<p>Sara</p>
<p>Tania</p>
</div>
答案 0 :(得分:3)
您不需要很多代码即可完成此工作。将<label>Job No</label>: {{vm.jobInfo.jobNumber}}
<copytext data="{{vm.jobInfo.jobNumber}}"></copytext>
<label>Customer </label>: {{vm.jobInfo.customerCode}}
<copytext data="{{vm.jobInfo.customerCode}}"></copytext>
<label>Reference</label>: {{vm.jobInfo.reference}}
<copytext data="{{vm.jobInfo.reference}}"></copytext>
添加到单击的元素,并从其同级中移除类。
.active
$(".container").on("click", function() {
$(this).toggleClass("active").siblings().removeClass("active");
});
body{padding: 3em}
.box1, .box2{
padding: 2em;
border: 1px solid silver;
margin-top: 2em;
}
.active {border-color: red}
.active .header{color: red}