如何使用 Sass 和 jQuery 建立切換按鈕？

使用Sass 和jQuery 建立切換按鈕

如果您希望建立一個在點擊時保持其狀態的按鈕切換，您可以需要超越CSS 本身。

語意方法

首選方法是使用複選框，根據其選取狀態進行樣式化。然而，這可能涉及額外的元素和複雜性。

jQuery 解決方案

更有效的方法是針對不同的按鈕狀態使用 jQuery 和兩個背景圖像。

HTML:

<code class="html"><a id="button" title="button">Press Me</a></code>

JS:

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

CSS:

此jQuery 函數會在點擊時切換按鈕上的「down」類別。 CSS 類別定義每個狀態的背景圖片和邊框樣式。

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