如何使用 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>

CSS:

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

此 jQuery 函数会在单击时切换按钮上的“down”类。 CSS 类定义每个状态的背景图像和边框样式。

以上是如何使用 Sass 和 jQuery 创建切换按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！