javascript - 其他 3 个 div 中的一个。当其他人看不见时，它就会出现。 (按下按钮时)

Question

所以我现在有 3 个 div:

    var t1 = document.getElementById("tafel1");
    var t2 = document.getElementById("tafel2");
    var t3 = document.getElementById("tafel3");

    function tafel1() {
        if (t1.style.display === "none") {
            t1.style.display = "block";
        } else {
            t1.style.display = "none";
        }
    }
    function tafel2(){
        if (t2.style.display === "none") {
            t2.style.display = "block";
        } else {
            t2.style.display = "none";
        }
    }
    function tafel3(){
        if (t3.style.display === "none") {
            t3.style.display = "block";
        } else {
            t3.style.display = "none";
        }
    }

div{
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

<div id="tafel1">
        Tafel 1
    </div>
    <div id="tafel2">
        Tafel 2
    </div>
    <div id="tafel3">
        Tafel 3
    </div>
    <button onclick="tafel1()">Tafel oefening 1</button>
    <button onclick="tafel2()">Tafel oefening 2</button>
    <button onclick="tafel3()">Tafel oefening 3</button>       

我想要的是，如果您按 1 个按钮，一次会打开 1 个框。因此，按下按钮时您只能看到 1 个框。另外 2 个将是不可见的。但当按下另一个按钮时，会出现另一个框。而另外 2 个将再次隐形。

提前致谢。

Answer 1

Working JSFiddle

借助少量 CSS 和对按钮单击函数调用的一些修改，您可以将大函数修改为下面的小 JavaScript 函数

HTML

<div id="tafel1" class="hide">Tafel 1</div>
<div id="tafel2" class="hide">Tafel 2</div>
<div id="tafel3" class="hide">Tafel 3</div>
<button onclick="footafel('1')">Tafel oefening 1</button>
<button onclick="footafel('2')">Tafel oefening 2</button>
<button onclick="footafel('3')">Tafel oefening 3</button>

Javascript

function footafel(id){  
  for(var i=1; i<=3; i++){
    document.getElementById('tafel'+i).className = 'hide';
  }
  if(id == ''){
    return false;
  } else {
    document.getElementById('tafel'+id).className = 'show';
  }
}

CSS

.hide { display: none; }
.show { display: block; }