如何使用 CSS 和 JavaScript 建立按下的切換按鈕？

互動式切換按鈕的樣式

建立一個在點擊時保持按下狀態的切換按鈕無法直接使用純 CSS 實作。要實現此效果，需要結合使用 HTML、CSS 和 JavaScript。

使用 HTML 和 CSS：

考慮使用複選框作為底層語義元素。根據是否檢查來設定不同的樣式。然而，這種方法可能涉及額外的 HTML 和 CSS 複雜性。

使用 jQuery：

更好的解決方案是使用 jQuery。這是一個在兩種狀態之間切換按鈕樣式的緊湊函數：

<code class="js">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

關聯的CSS：

要設定切換按鈕的樣式，請使用以下程式碼CSS:

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border: solid 2px;
  padding: 5px;
}

a.down {
  background: #bbb;
  border-color: #777 #777 #eaeaea #eaeaea;
}</code>

HTML:

最後，包含jQuery 函式庫並使用下列HTML 程式碼段來實作按鈕：

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a></code>

以上是如何使用 CSS 和 JavaScript 建立按下的切換按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！