javascript - 隐藏的 Div 在 Javascript 与其他 Div 切换之前占用空间

Question

我有 2 个 Div，当我按下一个按钮时，它们会使用 javascript 在它们之间切换。

问题是在我按下按钮之前，隐藏的 div 占用了空间并弄乱了布局。

我附上了片段

function switchVisible() {
  if (document.getElementById('1')) {

    if (document.getElementById('1').style.display == 'none') {
      document.getElementById('1').style.display = 'block';
      document.getElementById('2').style.display = 'none';
    }
    else {
      document.getElementById('1').style.display = 'none';
      document.getElementById('1').style.display = 'none';
      document.getElementById('2').style.display = 'block';
    }
  }
}

<button type="submit" value="Click" onclick="switchVisible();" </button>
<div id="1">
  some content
</div> 

<div id="2" class="inner border">
  some content 2
</div>

Answer 1

您只需在第一次使用时隐藏它:

document.getElementById('2').style.display = 'none';

或者也使用内联样式(不推荐):

<div id="2" class="inner border" style='display:none'>

希望这对您有所帮助。

document.getElementById('2').style.display = 'none';

function switchVisible() {
  if (document.getElementById('1')) {

    if (document.getElementById('1').style.display == 'none') {
      document.getElementById('1').style.display = 'block';
      document.getElementById('2').style.display = 'none';
    }
    else {
      document.getElementById('1').style.display = 'none';
      document.getElementById('1').style.display = 'none';
      document.getElementById('2').style.display = 'block';
    }
  }
}

<button type="submit" value="Click" onclick="switchVisible();" </button>
<div id="1">
  some content
</div> 

<div id="2" class="inner border">
  some content 2
</div>