javascript - 如何切换 div 的显示？

Question

我试过这个:https://jsfiddle.net/eu30mcps/ ，但它不起作用。当我单击第一个按钮时，如何显示第一个 div...等等？

function DisplayKat1() {
  var x = document.getElementById("kat1");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function DisplayKat2() {
  var x = document.getElementById("kat2");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function DisplayKat3() {
  var x = document.getElementById("kat3");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

<p>
    <button class="btn default" onklick="DisplayKat1()">A</button>
    <button class="btn default" onklick="DisplayKat2()">B</button>
    <button class="btn default" onklick="DisplayKat3()">C</button>
</p>


<div id="kat1">
    Text A
</div>

<div id="kat2">
    Text B
</div>

<div id="kat3">
    Text C
</div>

Answer 1

我建议采用更简单的方法。定义名为 hidden 的新 css 类:

.hidden {
  display: none;
}

只有一个函数将 hidden 类附加到每个 kat 中(从事件处理程序获取 kat 的 ID)。

function hideKat(katId) {
 var kat = document.getElementById(katId);
 kat.classList.toggle('hidden');
}

用新的处理程序替换 onclick 处理程序:

<p>
<button class="btn default" onclick="hideKat('kat1')">A</button>
<button class="btn default" onclick="hideKat('kat2')">B</button>
<button class="btn default" onclick="hideKat('kat3')">C</button>
</p>


<div id="kat1">
Text A
</div>

<div id="kat2">
Text B
</div>

<div id="kat3">
Text C
</div>

PS:您的按钮中有一个拼写错误:onklick -> onclick