編輯：我想制作一個 div，里面有一些 div。我想切換該 div ，當我單擊其中一個按鈕時，我想消失不匹配的 div 并顯示匹配的 div 。這是我的代碼：<div class="TheToggle"> <button id="Toggle1">Toggle 1</button> <button id="Toggle2">Toggle 2</button> <button id="Toggle2">Toggle 3</button> <div class="Toggle1">This 1</div> <div class="Toggle2">This 2</div> <div class="Toggle3">This 3</div></div>實際上，一開始我想顯示 Toggle1 內容，當我單擊另一個按鈕時，我想出現該按鈕的 div 并消失另一個按鈕。
1 回答
眼眸繁星
TA貢獻1873條經驗 獲得超9個贊
let buttons = document.querySelectorAll('.TheToggle button');
buttons.forEach(b => {
b.addEventListener('click', () => {
document.querySelectorAll('.TheToggle > div')
.forEach(d => d.style.display = 'none');
document.querySelector(`[data-hide="${b.getAttribute('id')}"]`).style.display = 'block';
})
});
<div class="TheToggle">
<button id="Toggle1">Toggle 1</button>
<button id="Toggle2">Toggle 2</button>
<button id="Toggle3">Toggle 3</button>
<div data-hide="Toggle1">This 1</div>
<div data-hide="Toggle2">This 2</div>
<div data-hide="Toggle3">This 3</div>
</div>
- 1 回答
- 0 關注
- 103 瀏覽
添加回答
舉報
0/150
提交
取消