Html / Javascript - Div 显示和隐藏

Question

小布局 MDIV ADIV = BDIV

我试图通过点击来隐藏和显示 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 进行加载。

提前干杯

Answer 1

您的代码已经在点击相应按钮时切换了两个元素的可见性。但是，您可能希望在元素可见时将其变为 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>

希望对您有所帮助！ :)

Answer 2

关于旁注：您应该为该 BDIV 提供默认样式 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";


}

<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，具体取决于您的需要。

Answer 3

向要在页面加载时隐藏的元素添加隐藏样式或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>

Html / Javascript - Div 显示和隐藏

Html / Javascript - Div Showing & Hiding

html

javascript

hide