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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

form-group

在Javascript切换到其他

2 个答案: