如何使用按鈕在兩個div元素之間切換

Question

我知道如何切換div，即隱藏/顯示元素。 但是如何在兩個div之間切換？

<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Answer 1

你可以在jquery中使用toggle()函數。 隱藏任何一個div並初始顯示其他div然后在按鈕單擊時調用toggle()

 $(function(){ $('div.hindi').hide();// hide it initially $('button').on('click', function(){ $('div.english, div.hindi').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Change</button> <div class="english"> <h4><strong>English headline</strong></h4> <p>Eng Content</p> </div> <div class="hindi"> <h4><strong>Hindi headline</strong></h4> <p>Hindi Content</p> </div> 

Answer 2

最初將display: none設置為第二個div。 然后在單擊按鈕時在div上使用toggle() ，如下所示：

 $('button').click(function(){ $('.english, .hindi').toggle(); }); 

 .hindi {display: none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Change</button> <div class="english active"> <h4><strong>English headline</strong></h4> <p>Eng Content</p> </div> <div class="hindi"> <h4><strong>Hindi headline</strong></h4> <p>Hindi Content</p> </div> 

Answer 3

只需使用普通類隱藏並切換它！

 $('button').click(function(){ $('.common').toggleClass("hide-dom"); }); 

 .hide-dom {display: none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Change</button> <div class="common"> <h4><strong>English headline</strong></h4> <p>English Content</p> </div> <div class="common hide-dom"> <h4><strong>Hindi headline</strong></h4> <p>Hindi Content</p> </div> 

Answer 4

如果你只有兩個div那么這是你可以做的一種方式。

 $('.hindi').hide(); $('button').on('click', function(){ $('.english, .hindi').toggle(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Change</button> <div class="english"> <h4><strong>English headline</strong></h4> <p>Eng Content</p> </div> <div class="hindi"> <h4><strong>Hindi headline</strong></h4> <p>Hindi Content</p> </div> 

Answer 5

 function toggleDiv() { var englishDiv = $('#english'); var hindiDiv = $('#hindi'); englishDiv.toggle(); hindiDiv.toggle(); } 

 .english { display: block; } .hindi { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="toggleDiv()">Change</button> <div class="english" id="english"> <h4><strong>English headline</strong></h4> <p>Eng Content</p> </div> <div class="hindi" id="hindi"> <h4><strong>Hindi headline</strong></h4> <p>Hindi Content</p> </div> 

Answer 6

只是為了好玩，這里只有HTML / CSS選項

 /*Hide Hindi initially*/ .hindi { display: none; } /*Hide the checkbox*/ #cbChange { margin-left: -99999px; } /*Use the :checked condition and general sibling selector (~) To Hide and show; */ #cbChange:checked~.hindi { display: block; } #cbChange:checked~.english { display: none; } /*Make the label button sexy*/ .lblChange { border-radius: 20px; color: #FFFFFF; font-family: Open Sans; font-size: 20px; font-weight: 100; padding: 10px; background-color: #3D94F6; box-shadow: 1px 1px 20px 0px #000000; text-shadow: 1px 1px 20px #000000; border: solid #337FED 1px; text-decoration: none; display: inline-block; cursor: pointer; } .lblChange:hover { background: #1E62D0; background-image: linear-gradient(to bottom, #1E62D0, #3D94F6); text-decoration: none; } 

 <label for="cbChange" class="lblChange">Change</label><input id="cbChange" type="checkbox" /> <div class="english"> <h4><strong>English headline</strong></h4> <p>Eng Content</p> </div> <div class="hindi"> <h4><strong>Hindi headline</strong></h4> <p>Hindi Content</p> </div>