Question

我在一个内容块上有两个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

以下是隔离列表的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是我找到的解决方案。隐藏点击并显示下一个。我希望你试着展示下一个而不是特定的一个，如果具体你试图显示然后你会改变代码。

DEMO HERE

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');
  });
});

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

2 个答案: