时间戳

首页 > 解决方案 > 在 2 个 div 之间切换

javascript - 在 2 个 div 之间切换

问题描述

我想在 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>

标签： javascriptjqueryhtmlcss

解决方案

你不需要很多代码来完成这项工作。添加.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}    
<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>

推荐阅读