我嘗試了這個： 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
- 1 回答
- 0 關注
- 145 瀏覽
添加回答
舉報
0/150
提交
取消