切换按钮：语义 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中文网其他相关文章！