HTML / Javascript - div show & hide - Html / Javascript - Div Showing & Hiding 小贝子编程网

小布局MDIVADIV = 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 加载。

提前干杯。

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

希望这有帮助！ :)

关于旁注：您应该为该 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，这取决于你的需要。

将隐藏样式或 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 show & hide

相关内容

最新更新

热门标签：