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

为此，您只需更改 HTML 结构。添加一个 data-target 表示 div id 值。在这里-

const btns = [...document.querySelectorAll('.btn')];

btns.forEach(el => {
  el.addEventListener('click', function(e) {
    const div = document.querySelector(e.target.dataset.target);
    if (div) {
      if (div.style.display === 'block') {
        div.style.display = 'none';
      } else {
        div.style.display = 'block';
      }
    }
  });
})

#kat1,
#kat2,
#kat3 {
  display: none;
  /* You can make the display block initially. It's up to you */
}

<p>
  <button class="btn default" data-target="#kat1">A</button>
  <button class="btn default" data-target="#kat2">B</button>
  <button class="btn default" data-target="#kat3">C</button>
</p>


<div id="kat1">Text A</div>
<div id="kat2">Text B</div>
<div id="kat3">Text C</div>

Answer 2

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

.hidden {
  display: none;
}

只有一个函数将 hidden class 附加到您的每个 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

Answer 3

没有名为 klick 的事件，您可能指的是 onclick。

如何切换 div 的显示？

How do I toggle the display of divs?

html

javascript

css

button

toggle