顯示div使用javascript隱藏另一個div

Question

我的html代碼如下所示：

<div id="register" class="dropdown">
  <button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
  <div id="container1" style="display:'none';">
  </div>
</div>
<div id="login" class="dropdown">
  <button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
  <div id="container2" style="display:'none';"></div>
</div>

這是我的js代碼：

function toggle_visibility(id) {
   var x = document.getElementById(id); {
   if(x.style.display == 'block') {
      x.style.display = 'none';
   } else {
      x.style.display = 'block';
  }
}

問題是，如何使這些div成為“當一個div可見時，另一個div被隱藏”？
對不起，我的英語不好：＃：3

Answer 1

首先在每個div中添加一個類，在這里我將其作為容器，然后將所有隱藏，並顯示1個特定的div

<div id="register" class="dropdown">
    <button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
    <div id="container1" class='container' style="display:none;">test
    </div>
</div>
<div id="login" class="dropdown">
    <button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
    <div id="container2" class='container' style="display:none;">test
    </div>
</div>


<script>
    function toggle_visibility(id) {
        var x = document.getElementById(id);
        var divsToHide = document.getElementsByClassName('container'); //divsToHide is an array so we loop through them
        for(var i = 0; i < divsToHide.length; i++){
            divsToHide[i].style.display = "none"; 
        }
        x.style.display = 'block';
    }
</script>

Answer 2

如果只需要這兩個div，則可以簡單地使用它們的div ID和一個簡單的條件：

function toggle(divNumber) {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  if (divNumber == 1) {
    div1.style.display = 'none';
    div2.style.display = 'block';
  } else {
    div2.style.display = 'none';
    div1.style.display = 'block';
  }
}

小提琴： https : //jsfiddle.net/8480twew/