HTML / Javascript-Div显示和隐藏

Question

Little Layout MDIV ADIV = BDIV 小布局MDIV ADIV = BDIV

I'm trying to hide and show divs with onclicks and failing miserably. 我试图用onclicks隐藏和显示div，但失败了。

When function MA() button is clicked = ADIV to show and BDIV to hide 单击函数MA（）按钮时=显示ADIV并隐藏BDIV

When function MB() button is clicked = BDIV to show and ADIV to hide 单击功能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>

Sidenote Also if anyone can explain how to load with just MDIV - ADIV on page load. 旁注如果有人可以解释如何仅在页面加载时使用MDIV-ADIV进行加载。

Cheers in advance. 提前加油。

Answer 1

Your code already toggles the visibility of the two elements on click of the respective buttons. 单击相应按钮，您的代码已经切换了两个元素的可见性。 However, you'll probably want to turn your elements to style.display = block when they're visible, rather than just removing the display style entirely. 但是，您可能希望将其可见时将其设置为style.display = block ，而不是完全删除display样式。

In order to have #BDIV hidden by default, simply run 为了默认隐藏#BDIV ，只需运行
document.getElementById("BDIV").style.display = "none"; outside of your two functions. 您的两个功能之外。

This can be seen in the following example: 在以下示例中可以看到：

 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>

Hope this helps! 希望这可以帮助！ :) :)

Answer 2

Regarding the sidenote: you should provide a default style of display: none for that BDIV: 关于旁注：您应该提供默认的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>

Edit : I would recommend explicitly setting a value for the display -property. 编辑：我建议显式设置display属性的值。 Either use inline , block , or inline-block , depending on what you need. 根据需要使用inline ， block或inline-block 。

Answer 3

Add a hidden style or CSS to the elements you want hidden on page load. 向要在页面加载时隐藏的元素添加隐藏的样式或CSS。 I have added inline styling here to hide "BDIV". 我在这里添加了内联样式以隐藏“ BDIV”。

Don't use JavaScript for styling on page load unless you have to. 除非必要，否则不要在页面加载时使用JavaScript进行样式设置。 It is better to use CSS or styling. 最好使用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>

HTML / Javascript-Div显示和隐藏

问题描述

3 个解决方案

解决方案1
0 已采纳 2017-11-14 21:54:19

解决方案2
0 2017-11-14 21:55:28

解决方案3
0 2017-11-14 22:00:19

HTML / Javascript-Div显示和隐藏

问题描述

3 个解决方案

解决方案1 0 已采纳 2017-11-14 21:54:19

解决方案2 0 2017-11-14 21:55:28

解决方案3 0 2017-11-14 22:00:19

解决方案1
0 已采纳 2017-11-14 21:54:19

解决方案2
0 2017-11-14 21:55:28

解决方案3
0 2017-11-14 22:00:19