為什么我的 onclick 事件與 onmouseover 和 onmouseout 一起使用時不起作用？

Question

 var b = document.getElementsByClassName("horizontal_nav_buttons"); //grab all the horizontal buttons.. function horizontal_nav_on_click(id) { //clicking one of the horizontal nav buttons.. /*******************/ /* OnClick Effect */ /*******************/ for (var i = 0; i < b.length; i++) { b[i].style.border = "thin solid #9ed3d2"; // reset them all back to their default style b[i].style.color = "black"; b[i].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)"; } b[id].style.color = "red"; b[id].style.border = "thin solid orange"; //change the style of the one we clicked! b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)"; } function horizontal_nav_hover(id) { b[id].style.color = "red"; b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)"; b[id].style.border = "thin solid orange"; } function horizontal_nav_out(id) { b[id].style.color = "black"; b[id].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)"; b[id].style.border = "thin solid #9ed3d2"; }

 .horizontal_nav_buttons { margin-left:10px; margin-top:3px; margin-right:-10px; background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); border-radius:6px; height: 22px; border: thin solid #9ed3d2; } .Horizontal_Nav_Bar { background-color:#f1b5a8; border-radius: 25px 25px 25px 25px; height: 27px; /margin-top:2px; }

 <div class="Horizontal_Nav_Bar"> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(0)" onmouseover="horizontal_nav_hover(0)" onmouseout="horizontal_nav_out(0)">Link 1 </button> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(1)" onmouseover="horizontal_nav_hover(1)" onmouseout="horizontal_nav_out(1)">Link 2 Configuration</button> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(2)" onmouseover="horizontal_nav_hover(2)" onmouseout="horizontal_nav_out(2)">Link 3 </button> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(3)" onmouseover="horizontal_nav_hover(3)" onmouseout="horizontal_nav_out(3)">Link 4 </button> </div>

誰能幫我理解為什么 onClick 事件無法更改按鈕的樣式？ 我不知道為什么這不起作用。 當我刪除 onmouseover 事件和 onmouseout 事件時，onclick 按預期工作。

Answer 1

您的 onmouseout 正在覆蓋您在 onClick 事件中放置在按鈕上的樣式。 只需刪除對 onmouseout 的調用，您就會看到它工作正常。

編輯：

@Dumisani 指出，當您退出按鈕時，這不會刪除樣式。 要解決這個問題，只需使用一個名為 clicked 的簡單變量來跟蹤哪個是活動的。

在您的 onclick 設置 clicked = 傳遞給 clicked 函數的 id 值。 然后在您的 onmouseout 中更新 id != 單擊的每個元素。

 var b = document.getElementsByClassName("horizontal_nav_buttons"); //grab all the horizontal buttons.. var clicked = -1; function horizontal_nav_on_click(id) { //clicking one of the horizontal nav buttons.. /*******************/ /* OnClick Effect */ /*******************/ for (var i = 0; i < b.length; i++) { b[i].style.border = "thin solid #9ed3d2"; // reset them all back to their default style b[i].style.color = "black"; b[i].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)"; } b[id].style.color = "red"; b[id].style.border = "thin solid orange"; //change the style of the one we clicked! b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)"; clicked = id; } function horizontal_nav_hover(id) { b[id].style.color = "red"; b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)"; b[id].style.border = "thin solid orange"; } function horizontal_nav_out(id) { if(id != clicked){ b[id].style.color = "black"; b[id].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)"; b[id].style.border = "thin solid #9ed3d2"; } }

 .horizontal_nav_buttons { margin-left:10px; margin-top:3px; margin-right:-10px; background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); border-radius:6px; height: 22px; border: thin solid #9ed3d2; } .Horizontal_Nav_Bar { background-color:#f1b5a8; border-radius: 25px 25px 25px 25px; height: 27px; /margin-top:2px; }

 <div class="Horizontal_Nav_Bar"> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(0)" onmouseover="horizontal_nav_hover(0)" onmouseout="horizontal_nav_out(0)">Link 1 </button> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(1)" onmouseover="horizontal_nav_hover(1)" onmouseout="horizontal_nav_out(1)">Link 2 Configuration</button> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(2)" onmouseover="horizontal_nav_hover(2)" onmouseout="horizontal_nav_out(2)">Link 3 </button> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(3)" onmouseover="horizontal_nav_hover(3)" onmouseout="horizontal_nav_out(3)">Link 4 </button> </div>

Answer 2

要添加到現有答案中，可以通過在腳本中設置 className 並依靠 CSS 來簡化此操作：

 var b = document.getElementsByClassName("horizontal_nav_buttons"); function horizontal_nav_on_click(id) { for (var i = 0; i < b.length; i++) { b[i].className = 'horizontal_nav_buttons'; } b[id].className = 'horizontal_nav_buttons clicked'; }

 .Horizontal_Nav_Bar { background-color: #f1b5a8; border-radius: 25px 25px 25px 25px; height: 27px; /margin-top: 2px; } .horizontal_nav_buttons { margin-left: 10px; margin-top: 3px; margin-right: -10px; border-radius: 6px; height: 22px; color: black; background: linear-gradient(to bottom, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%); border: thin solid #9ed3d"; } .horizontal_nav_buttons:hover { color: red; background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); border: thin solid orange; } .clicked { color: red; border: thin solid orange; background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); }

 <div class="Horizontal_Nav_Bar"> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(0)">Link 1 </button> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(1)">Link 2 Configuration</button> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(2)">Link 3 </button> <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(3)">Link 4 </button> </div>