首頁 > web前端 > css教學 > 主體

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

Patricia Arquette
發布: 2024-11-02 09:39:02
原創
552 人瀏覽過

How to Create a Depressed Toggle Button with CSS and 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板