为了账号安全,请及时绑定邮箱和手机立即绑定

如何切换 div 的显示?

如何切换 div 的显示?

紫衣仙女 2023-10-17 15:09:27
我尝试了这个: 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>
查看完整描述

1 回答

?
慕码人2483693

TA贡献1860条经验 获得超9个赞

我建议采用更简单的方法。定义新的 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


查看完整回答
反对 回复 2023-10-17
  • 1 回答
  • 0 关注
  • 45 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信