通過點擊一個按鈕使用JavaScript帶來其他divs infront？

我有3個div和3個按鈕。我想要一個javascript代碼，如果我點擊button1，那麼所有的div應該是可見的。如果我點擊button2，那麼div2應該只可見，它應該是div1和div3的前面。如果我點擊button3，那麼div3應該只能看到，它應該是div2和div3的前面。通過點擊一個按鈕使用JavaScript帶來其他divs infront？

我的代碼是波紋管：

[<html> 
<head></head> 
<body> 
<input type="button" id="button1" onclick="button1Click();"/> 
<input type="button" id="button2" onclick="button2Click();"/> 
<input type="button" id="button3" onclick="button3Click();"/> 

<div id="id1"> 
     <input type="checkbox" /> 
</div> 

<div id="id2"> 
<input type="checkbox" /> 
</div> 

<div id="id3"> 
<input type="checkbox" /> 
</div> 
<script type="text/javascript"> 

     function button1Click() {  
      var DivId1 = document.getElementById("id1"); 
      var DivId2 = document.getElementById("id2"); 
      var DivId3 = document.getElementById("id3"); 

      DivId1.style.visibility = "visible"; 
      DivId2.style.visibility = "visible"; 
      DivId3.style.visibility = "visible"; 

     } 

     function buttonClick2() { 
      var DivId1 = document.getElementById("id1"); 
      var DivId2 = document.getElementById("id2"); 
      var DivId3 = document.getElementById("id3");   

      DivId1.style.visibility = "hidden"; 
      DivId2.style.visibility = "visible"; 
      DivId3.style.visibility = "hidden"; 
     } 

     function buttonClick3() { 

      var DivId1 = document.getElementById("id1"); 
      var DivId2 = document.getElementById("id2"); 
      var DivId3 = document.getElementById("id3");   

      DivId1.style.visibility = "hidden"; 
      DivId2.style.visibility = "hidden"; 
      DivId3.style.visibility = "visible"; 

     } 


    </script> 
    </body> 

    </html>][1]

但這clickevent只能出現或disappers一個div，但不能帶來其他的div一個div盈。因此，像div的第二張圖片一樣有免費空間。

來源

2017-10-13 Sabab Zulfiker

查找到'Z-index' - https://www.w3schools.com/cssref/pr_pos_z-index.asp – Nick

你可以使用jQuery？ –

這不起作用。我不知道爲什麼。但有沒有辦法，不使用z-index？ –

代替visibilityhidden/visible，您可以使用displayblock/none當元素是隱藏的，不會佔用空間。這是你想要的？

function button1Click() { 
 
\t var DivId1 = document.getElementById("id1"); 
 
\t var DivId2 = document.getElementById("id2"); 
 
\t var DivId3 = document.getElementById("id3"); 
 

 
\t DivId1.style.display = "block"; 
 
\t DivId2.style.display = "block"; 
 
\t DivId3.style.display = "block"; 
 

 
} 
 

 
function buttonClick2() { 
 
\t var DivId1 = document.getElementById("id1"); 
 
\t var DivId2 = document.getElementById("id2"); 
 
\t var DivId3 = document.getElementById("id3"); 
 

 
\t DivId1.style.display = "none"; 
 
\t DivId2.style.visibility = "block"; 
 
\t DivId3.style.display = "none"; 
 
} 
 

 
function buttonClick3() { 
 

 
\t var DivId1 = document.getElementById("id1"); 
 
\t var DivId2 = document.getElementById("id2"); 
 
\t var DivId3 = document.getElementById("id3"); 
 

 
\t DivId1.style.display = "none"; 
 
\t DivId2.style.display = "none"; 
 
\t DivId3.style.display = "block"; 
 
}

<input type="button" id="button1" onclick="button1Click();" /> 
 
<input type="button" id="button2" onclick="buttonClick2();" /> 
 
<input type="button" id="button3" onclick="buttonClick3();" /> 
 

 
<div id="id1"> 
 
\t <input type="checkbox" />111 
 
</div> 
 

 
<div id="id2"> 
 
\t <input type="checkbox" />222 
 
</div> 
 

 
<div id="id3"> 
 
\t <input type="checkbox" />333 
 
</div>

來源

2017-10-13 16:58:05

您應該使用DivId.style.display = '無' 來隱藏和DivId.style.display = '塊'，以顯示。

來源

2017-10-13 17:03:34

如果你可以使用jQuery，你可以使用下面的代碼。如果你不能使用jQuery，你可以使用JavaScript來使用相同的方法。基本上，你需要做這些事情：

指定（使用一些屬性）每個按鈕，應該單擊按鈕時顯示哪些目標元素。
現在，爲需要顯示/隱藏的內容div添加類或一些其他可區別的屬性。
在點擊事件中，檢查點擊了哪個按鈕，獲取其目標div並顯示它們，隱藏所有其他按鈕。

$("#links a").on("click", function(e){ 
 
    e.preventDefault(); 
 
    var targetClass = $(this).data("target"); 
 
    
 
    $("#contents .items").hide(); 
 
    $("#contents ." + targetClass).show(); 
 
});//#links a click()

#links{ 
 
    float: left; 
 
    width: 100px; 
 
} 
 
#links a{ 
 
    display: block; 
 
} 
 

 
#contents{ 
 
    float: left; 
 
} 
 
#contents .items{ 
 
    background-color: #ddd; 
 
    margin: 1px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="links"> 
 
    <a href="#" data-target="items">all</a> 
 
    <a href="#" data-target="its">its</a> 
 
    <a href="#" data-target="xyz">xyz</a> 
 
</div> 
 

 
<div id="contents"> 
 
    <div class="items">only items</div> 
 
    <div class="items its">its</div> 
 
    <div class="items xyz">xyz</div> 
 
    <div class="items its">its</div> 
 
    <div class="items">none</div> 
 
    <div class="items its xyz">its and xyz both</div> 
 
    <div class="items its">its</div> 
 
</div><!--#contents-->

來源

2017-10-13 17:06:34

通過點擊一個按鈕使用JavaScript帶來其他divs infront？

回答

相關問題