2個div在同一塊顯示一個隱藏其他onclick和循環

Question

我有一個內容塊2個div，一個活動，另一個隱藏。

我想單擊div，隱藏第一個並顯示第二個。

然後，當我點擊第二個隱藏它並顯示第一個。

然而，我有12個更多的塊與相同的estructure和類需要有此功能。

爲了記錄我還沒有使它工作，甚至沒有一個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：

。首先，一個{顯示：塊;} 。第二，一個{顯示：無;}

我所要考慮的最簡單的方法jquery，javascript沒關係

Answer 1

這裏是用分離的列表的一個例子：

$(document).ready(function(){ 
 
    $('.block').on('click', '.item', function(e){ 
 
    $(this) 
 
     \t \t .removeClass('active') 
 
     \t .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

這是我找到的解決方案。隱藏點擊並顯示下一個。我希望你試圖展示下一個，但不是特定的一個，如果你試圖展示，那麼你會改變代碼。

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