使用HTML 和CSS 建立切換按鈕
您的目標是使用HTML 和CSS 建立一個切換按鈕，並具有鎖定的行為單擊一次時為推動狀態，再次按一下時為釋放狀態。為此，您可以考慮以下方法：
使用 jQuery
建議的方法是使用 jQuery（一個 JavaScript 函式庫）來實現所需的行為。 jQuery 提供了一個toggleClass() 方法，讓您能夠在元素類別的兩種狀態之間切換。這允許您建立一個具有兩個類別的切換按鈕，這兩個類別對於「按下」和「釋放」狀態具有不同的樣式。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#button {
/* Styling for released state */
}
#button.down {
/* Styling for pushed state */
}
</style>
<script>
$(document).ready(function() {
$('#button').click(function() {
$(this).toggleClass("down");
});
});
</script>在此範例中，「按鈕」元素將接收附加類別“單擊時“向下”，這會將其外觀變更為“推”狀態。再次按一下時，“down 」類別將被刪除，使其返回到「released」狀態。
使用CSS 和額外元素
雖然不像使用jQuery，可以使用CSS 和其他HTML元素來模擬切換按鈕的行為。
以上是如何使用 HTML 和 CSS 建立切換按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
