我想使用 css 在 html 中创建一个切换按钮。我想要它,这样当您单击它时,它会保持在推入状态,而当您再次单击它时,它会弹出。
如果没有办法只使用css。有没有办法使用jQuery来做到这一点?
原文由 Donny V. 发布,翻译遵循 CC BY-SA 4.0 许可协议
JQuery UI 使创建切换按钮变得轻而易举。就把这个
<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />
在你的页面上然后在你的身体 onLoad
或你的 $.ready()
(或一些对象文字 init()
)如果你的.所以:
$("#myToggleButton").button()
而已。 (不要忘记 < label for=...>
因为 JQueryUI 将它用于切换按钮的主体。)
从那里你可以像其他任何东西一样使用它 input="checkbox
“因为这仍然是底层控件,但 JQuery UI 只是将它的外观设置为看起来像屏幕上的一个漂亮的切换按钮。
原文由 bkdraper 发布,翻译遵循 CC BY-SA 3.0 许可协议
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答2.9k 阅读✓ 已解决
3 回答2.4k 阅读
4 回答2.2k 阅读
3 回答2.1k 阅读
好的语义方法是使用一个复选框,然后在是否选中它时以不同的方式对其进行样式设置。但是没有什么好的方法可以做到这一点。您必须添加额外的跨度、额外的 div,并且为了看起来非常漂亮,添加一些 javascript。
所以最好的解决方案是使用一个小的 jQuery 函数和两个背景图像来设置按钮的两种不同状态。具有由边框给出的上/下效果的示例:
显然,您可以添加代表按钮向上和按钮向下的背景图像,并使背景颜色透明。