如何使用 HTML 和 CSS 建立切換按鈕？

使用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中文網其他相關文章！