當(dāng)我單擊一個按鈕并更改所選按鈕的顏色時，我試圖重置所有背景顏色。我希望一開始一個按鈕的背景顏色為深灰色，如代碼段所示，當(dāng)我單擊另一個按鈕時，所有按鈕都將重置為白色，并且單擊的按鈕將變?yōu)樯罨疑Ｎ以鯓硬拍茏龅竭@一點？現(xiàn)在當(dāng)我點擊另一個按鈕時沒有任何反應(yīng)。這是我的代碼，有什么問題嗎？<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* Style the buttons */ .portfolio-buttons { border: none; outline: none; padding: 12px 16px; /* background-color: white; */ cursor: pointer; } .portfolio-buttons-normal { background-color: white; } .portfolio-buttons:hover { background-color: #ddd; } .portfolio-buttons-active { background-color: #666; color: white; } </style></head><body> <div id="myBtnContainer"> <button class="portfolio-buttons portfolio-buttons-normal portfolio-buttons-active">Show all</button> <button class="portfolio-buttons portfolio-buttons-normal" >.html</button> <button class="portfolio-buttons portfolio-buttons-normal">.css</button> <button class="portfolio-buttons portfolio-buttons-normal" >.js</button> <button class="portfolio-buttons portfolio-buttons-normal" >.java</button> <button class="portfolio-buttons portfolio-buttons-normal" >.py</button> </div> <script> function changeClass(button, classRef) { button.classList.forEach((className) => { if (className.startsWith("portfolio-buttons-active")) button.classList.remove(className); }); console.log(classRef); button[classRef].classList.add("portfolio-buttons-active"); } </script></body></html>
如何重置所有其他按鈕的背景顏色并在單擊時突出顯示所選按鈕？
蕭十郎
2023-03-18 16:29:21
