创建一个在单击时保持按下状态的切换按钮无法直接使用纯 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中文网其他相关文章!