HTML / Javascript-Div顯示和隱藏
[英]Html / Javascript - Div Showing & Hiding
問題描述
小布局MDIV ADIV = BDIV
我試圖用onclicks隱藏和顯示div，但失敗了。
單擊函數MA（）按鈕時=顯示ADIV並隱藏BDIV
單擊功能MB（）按鈕時=顯示BDIV並隱藏ADIV
function MA() { document.getElementById("ADIV").style.display = ""; document.getElementById("BDIV").style.display = "none"; } function MB() { document.getElementById("ADIV").style.display = "none"; document.getElementById("BDIV").style.display = ""; }
<div id="MDIV"> <button onclick="MA()">MA</button> <button onclick="MB()">MB</button> </div> <div id="ADIV"> <button onclick="A()">ADIV</button> </div> <div id="BDIV"> <button onclick="B()">BDIV</button> </div>
旁注如果有人可以解釋如何僅在頁面加載時使用MDIV-ADIV進行加載。
提前加油。
3 個解決方案
解決方案1
0 已采納 2017-11-14 21:54:19
單擊相應按鈕，您的代碼已經切換了兩個元素的可見性。 但是，您可能希望將其可見時將其設置為style.display = block ，而不是完全刪除display樣式。
為了默認隱藏#BDIV ，只需運行
document.getElementById("BDIV").style.display = "none"; 您的兩個功能之外。
在以下示例中可以看到：
document.getElementById("BDIV").style.display = "none"; function MA() { document.getElementById("ADIV").style.display = "block"; document.getElementById("BDIV").style.display = "none"; } function MB() { document.getElementById("ADIV").style.display = "none"; document.getElementById("BDIV").style.display = "block"; }
<body> <div id="MDIV"> <button onclick="MA()">MA</button> <button onclick="MB()">MB</button> </div> <div id="ADIV"> <button onclick="A()">ADIV</button> </div> <div id="BDIV"> <button onclick="B()">BDIV</button> </div> </body>
希望這可以幫助！ :)
解決方案2
0 2017-11-14 21:55:28
關於旁注：您應該提供默認的display: none樣式display: none該BDIV不需要：
function MA() { document.getElementById("ADIV").style.display = "block"; document.getElementById("BDIV").style.display = "none"; } function MB() { document.getElementById("ADIV").style.display = "none"; document.getElementById("BDIV").style.display = "block"; }
<div id="MDIV"> <button onclick="MA()">MA</button> <button onclick="MB()">MB</button> </div> <div id="ADIV"> <button onclick="A()">ADIV</button> </div> <div id="BDIV" style="display: none;"> <button onclick="B()">BDIV</button> </div>
編輯 ：我建議顯式設置display屬性的值。 根據需要使用inline ， block或inline-block 。
解決方案3
0 2017-11-14 22:00:19
向要在頁面加載時隱藏的元素添加隱藏的樣式或CSS。 我在這里添加了內聯樣式以隱藏“ BDIV”。
除非必要，否則不要在頁面加載時使用JavaScript進行樣式設置。 最好使用CSS或樣式。
<html>
<head></head>
<body>
<div id="MDIV">
<button onclick="MA()">MA</button>
<button onclick="MB()">MB</button>
</div>
<div id="ADIV">
<button onclick="A()">ADIV</button>
</div>
<div id="BDIV" style="display: none;">
<button onclick="B()">BDIV</button>
</div>
</body>
</html>
<script>
//CACHE YOUR ELEMENTS
var mdiv = document.getElementById('MDIV');
var adiv = document.getElementById('ADIV');
var bdiv = document.getElementById('BDIV');
//helper functions
function hide(elm) { elm.style.display = 'none'; }
function show(elm) { elm.style.display = 'block'; }
function MA() {
hide(adiv);
show(bdiv);
}
function MB() {
hide(adiv);
show(bdiv);
}
</script>
隱藏/顯示 <div> 用JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.