如何切换 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

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

.hidden {

  display: none;

}

只有一个函数将hidden类附加到每个kats （从事件处理程序中获取 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