如何切换 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 {&nbsp; display: none;}只有一个函数将hidden类附加到每个kats （从事件处理程序中获取 kat 的 id）。function hideKat(katId) {&nbsp;var kat = document.getElementById(katId);&nbsp;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