堆棧內存溢出
  簡體   English   中英

用2個按鈕切換2個div的可見性

[英]Toggle visibility of 2 divs with 2 buttons

 原文  2016-02-03 16:31:15  6   5    javascript

問題描述

我的代碼有問題

我試圖默認顯示1 div（ show_1 ），然后單擊按鈕2時將其隱藏並顯示第二個div（ show_2 ）。 然后單擊按鈕1時，隱藏show_2 ， 然后再次顯示show_1

https://jsfiddle.net/mgzurjgL/4/

雖然它不起作用，但是當我單擊任何一個按鈕時都沒有任何反應。 

 function switch_div(show_1, show_2) { var a = document.getElementById(show_1); var a2 = document.getElementById(show_2); if (a.style.display == 'block') { a.style.display = 'block'; a2.style.display = 'none'; } else { a.style.display = 'none'; a2.style.display = 'block'; } } 
 .button { width: 100px; height: 30px; display: inline-block; background-color: black; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; } .button:hover { background-color: red; } .content { width: 400px; height: 100px; display: block; background-color: gray; } .hide { display: none; } 
 <div class="button" onclick="switch_div('show_1', 'show_2');"> 1 </div> <div class="button" onclick="switch_div('show_1', 'show_2');"> 2 </div> <div class="content" id="show_1"> Show by default (and when button 1 is clicked) </div> <div class="content hide" id="show_2"> Show this div when button 2 is clicked </div>

5 個解決方案

解決方案1
 2  2016-02-03 16:44:19

兩項：腳本放置和錯字。 JSFiddle的工作版本， 已在Google Chrome中測試。

  1. 該腳本必須在divs之前運行。 在JSFiddle Javascript設置中，我將“ Load Type”更改為“ No wrap-in <head> 。 這樣，在加載div時，存在switch_div函數。

  2. 有一個錯字： 

     if (a.style.display == 'block')

    應該 

     if (a.style.display == 'none')

    否則，您將在已經被block的元素上設置block顯示:)。

編輯 ：此代碼仍然無法滿足您的期望，因為您編寫的函數會切換div可見性，而與按下哪個按鈕無關。 您真正想要的是這個小提琴 ： 

<div class="button" onclick="switch_div('show_1', 'show_2', true);">

和 

<div class="button" onclick="switch_div('show_1', 'show_2', false);">

和...一起 

function switch_div(show_1, show_2, should_show_1) {  
   var a = document.getElementById(show_1);
   var a2 = document.getElementById(show_2);
   if(should_show_1) {
      a.style.display = 'block';             
      a2.style.display = 'none';
   }
   else {
      a.style.display = 'none';            
      a2.style.display = 'block';
   }              
}

這樣，您只會得到想要的div 。

解決方案2
 2 已采納  2016-02-03 16:46:26

在JSFiddle中，您的設置有誤，您需要在頭部而不是onload中運行腳本。 另外，您兩次傳入相同的參數。 還有為什么你不嘗試這樣簡單的事情。

https://jsfiddle.net/mgzurjgL/5/ 

 function switch_div(show) { document.getElementById("show_"+show).style.display = "block"; document.getElementById("show_"+((show==1)?2:1)).style.display = "none"; } 
 .button { width: 100px; height: 30px; display: inline-block; background-color: black; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; } .button:hover { background-color: red; } .content { width: 400px; height: 100px; display: block; background-color: gray; } .hide { display: none; } 
 <div class="button" onclick="switch_div(1);"> 1 </div> <div class="button" onclick="switch_div(2);"> 2 </div> <div class="content" id="show_1"> Show by default (and when button 1 is clicked) </div> <div class="content hide" id="show_2"> Show this div when button 2 is clicked </div>

解決方案3
 0  2016-02-03 16:45:24

您需要在if-else中切換語句或將if中的條件更改為“ if（a.style.display！=='block'）”

當a.style.display為'block'時，您必須將其設置為'none'才能隱藏它。 

 function switch_div(show_1, show_2) { var a = document.getElementById(show_1); var a2 = document.getElementById(show_2); if (a.style.display !== 'block') { a.style.display = 'block'; a2.style.display = 'none'; } else { a.style.display = 'none'; a2.style.display = 'block'; } } 
 .button { width: 100px; height: 30px; display: inline-block; background-color: black; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; } .button:hover { background-color: red; } .content { width: 400px; height: 100px; display: block; background-color: gray; } .hide { display: none; } 
 <div class="button" onclick="switch_div('show_1', 'show_2');"> 1 </div> <div class="button" onclick="switch_div('show_1', 'show_2');"> 2 </div> <div class="content" id="show_1"> Show by default (and when button 1 is clicked) </div> <div class="content hide" id="show_2"> Show this div when button 2 is clicked </div>

解決方案4
 0  2016-02-03 16:49:46

我更改了js函數和按鈕的“調用”。 

 function switch_div(show_1, show_2) { var a = document.getElementById(show_2); var a2 = document.getElementById(show_1); a.style.display = 'none'; a2.style.display = 'block'; } 
 .button { width: 100px; height: 30px; display: inline-block; background-color: black; margin: 0 10px 10px 0; color: #fff; text-align: center; line-height: 30px; cursor: pointer; } .button:hover { background-color: red; } .content { width: 400px; height: 100px; display: block; background-color: gray; } .hide { display: none; } 
 <div class="button" onclick="switch_div('show_1', 'show_2');"> 1 </div> <div class="button" onclick="switch_div('show_2', 'show_1');"> 2 </div> <div class="content" id="show_1"> Show by default (and when button 1 is clicked) </div> <div class="content hide" id="show_2"> Show this div when button 2 is clicked </div>

解決方案5
 0  2016-02-03 17:00:39

這也適用於： 

    <div class="button" onclick="switch_div(1,2);">
    1
    </div>
    <div class="button" onclick="switch_div(2,1);">
    2
    </div>

    <div class="content" id="show_1">
    Show by default (and when button 1 is clicked)
    </div>
    <div class="content hide" id="show_2">
    Show this div when button 2 is clicked
    </div>


    <script>
    function switch_div(n1,n2) {  
        document.getElementById("show_"+n1).style.display = 'block';
        document.getElementById("show_"+n2).style.display = 'none';
    }
    </script>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 一次切換兩個div的可見性 切換三個或更多div的可見性 在JavaScript中切換Divs的可見性 javascript切換多個Divs的可見性 Javascript切換可見性的多個div 需要切換2個DIV的DIV可見性 切換可見性多個divs javascript HTML div切換可見性不起作用 在多個div之間切換可見性 Bootstrap5 模態必須切換 div 的可見性
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM