切換按鈕：語意 HTML 或自訂 jQuery 樣式 - 哪個最好？-css教學-PHP中文網

切換按鈕：語意 HTML 或自訂 jQuery 樣式 - 哪個最好？

Barbara Streisand

發布： 2024-10-31 19:14:02

原創

394 人瀏覽過

Toggle Buttons: Semantic HTML or Custom jQuery Styling - Which is Best?

建立切換按鈕：語意與時尚選項

切換按鈕允許使用者在兩種狀態之間切換。雖然 HTML 本身包含複選框輸入，但它們可能不會總是滿足所需的視覺要求。

語義方法：複選框樣式

推薦的語義方法涉及使用複選框和樣式它根據其檢查狀態而有所不同。然而，有效地設計複選框樣式可能具有挑戰性。

替代方案：jQuery 和CSS

要獲得更具可自訂性的解決方案，請考慮使用jQuery 和CSS：

分配切換事件：
- 新增jQuery 事件處理程序，通常使用.click()。
切換CSS 類別：
- 使用.toggleClass() 新增和刪除按鈕外觀（例如「向下更改外觀（例如「向下更改外觀（例如「向下更改外觀」 ”）的CSS 類別。
CSS 樣式：
- 為每個按鈕狀態建立具有不同邊框和背景樣式的CSS 類別（例如，「向上」和「向下」）。

範例：

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

登入後複製

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}</code>

登入後複製

<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>

登入後複製

以上是切換按鈕：語意 HTML 或自訂 jQuery 樣式 - 哪個最好？的詳細內容。更多資訊請關注PHP中文網其他相關文章！