建立一個在點擊時保持按下狀態的切換按鈕無法直接使用純 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中文網其他相關文章!