編輯：我想制作一個(gè) div，里面有一些 div。我想切換該 div ，當(dāng)我單擊其中一個(gè)按鈕時(shí)，我想消失不匹配的 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>實(shí)際上，一開始我想顯示 Toggle1 內(nèi)容，當(dāng)我單擊另一個(gè)按鈕時(shí)，我想出現(xiàn)該按鈕的 div 并消失另一個(gè)按鈕。
1 回答
眼眸繁星
TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊
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 關(guān)注
- 97 瀏覽
添加回答
舉報(bào)
0/150
提交
取消