同一块上的 2 个 div 显示一个隐藏另一个 onclick 和循环

Question

我在一个内容块上有 2 个 div，一个是活动的，另一个是隐藏的。

我想单击 div，隐藏第一个并显示第二个。

然后当我点击第二个隐藏它并显示第一个时。

然而，我还有 12 个具有相同结构和类的块，它们需要具有此功能。

为了记录，我什至在一个 div 上都没有让它工作。

<div class="feature-list-item">

<div class="first-one">
    <div class="imgbox">
        <p>some content<p/>
    </div>                                
</div>

<div class="second-one">
    <div class="imgbox">
        <p>some content<p/>
    </div>                                 
</div>                          

这是css：

.first-one {display:block;} .second-one {display:none;}

我想考虑最简单的方法 jquery, javascript 没关系

Answer 1

这是一个带有隔离列表的示例：

 $(document).ready(function(){ $('.block').on('click', '.item', function(e){ $(this) .removeClass('active') .siblings('.item') .addClass('active'); }); });

 .blue .item { background: blue; } .green .item { background: green; } .item { padding: 10px; margin: 10px; color: white; display: none; } .item.active { display: block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block blue feature-list-item"> <div class="item active first-one"> <div class="imgbox"> <p>Box 1<p/> </div> </div> <div class="item second-one"> <div class="imgbox"> <p>Box 2<p/> </div> </div> </div> <div class="block green feature-list-item"> <div class="item active first-one"> <div class="imgbox"> <p>Box 3<p/> </div> </div> <div class="item second-one"> <div class="imgbox"> <p>Box 4<p/> </div> </div> </div>

Answer 2

这是我找到的解决方案。 隐藏单击并显示下一个。 我希望您尝试显示下一个但不是特定的，如果您尝试显示特定的内容，那么您将更改代码。

演示在这里

HTML

<div class="click show">
  <div class="imgbox">
    <p>some content<p/>
  </div>                                
</div>

<div class="click hidden">
  <div class="imgbox">
    <p>some content<p/>
  </div>                                
</div>
<div class="click hidden">
  <div class="imgbox">
    <p>some content<p/>
  </div>                                
</div>
<div class="click hidden">
  <div class="imgbox">
    <p>some content<p/>
  </div>                                
</div>
<div class="click hidden">
  <div class="imgbox">
    <p>some content<p/>
  </div>                                
</div>
<div class="click hidden">
  <div class="imgbox">
    <p>some content<p/>
  </div>                                
</div>

CSS

.show{
  width:200px;
  height:100px;
  background-color:red;
}
.hidden{
  display:none;
}

JS

$(document).ready(function(){
  $('.click').click(function(){
    $(this).removeClass('show');
    $(this).addClass('hidden');
    $(this).next('.hidden').addClass('show');
    $(this).next('.hidden').removeClass('hidden');
  });
});