Question

小布局 MDIV ADIV = BDIV

我试图用onclicks隐藏和显示div并且悲惨地失败。

单击功能MA（）按钮时= ADIV显示，BDIV隐藏

单击功能MB（）按钮时= BDIV显示和ADIV隐藏

＆＃13;

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 = "";


}

＆＃13;

<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>

＆＃13;

旁注此外，如果任何人都可以解释如何在页面加载时加载MDIV - ADIV。

提前干杯。

Answer 1

您的代码已经在单击相应按钮时切换两个元素的可见性。但是，您可能希望在元素可见时将其转换为style.display = block，而不是仅仅完全删除display样式。

默认情况下隐藏#BDIV，只需在您的两个功能之外运行document.getElementById("BDIV").style.display = "none";。

这可以在以下示例中看到：

＆＃13;

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";
}

＆＃13;

<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>

＆＃13;

希望这有帮助！：）

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显示＆amp;藏

3 个答案: