如何用Javascript/CSS创建一个开/关开关？

我想要一个滑动开关.左边是Off,右边是On.当用户切换开关时,我希望"滑块"部分滑到另一侧并指示它已关闭.然后我可以有一个回调,它将切换开关的状态作为输入,这样我就可以采取相应的行动.

知道怎么做吗？

1> anna.mi..：

---

看看这个发电机:开/关FlipSwitch

你可以得到各种不同的风格结果和它的CSS - 没有JavaScript!

2> Alex Reitbor..：

---

你的意思是IPhone复选框？试试Thomas Reynolds的iOS Checkboxes脚本:

一旦文件可供您的站点使用,激活脚本非常简单:

...

$(document).ready(function() {
  $(':checkbox').iphoneStyle();
});

结果:

---

http://proto.io/freebies/onoff/ - 用于生成带有动画过渡的纯CSS3 On/Off翻转开关的服务.

---

值得注意的是,它不是**免费用于商业用途.

3> Groo..：

---

使用普通的JavaScript

使用jQuery

如果你使用jQuery,你可以使用toggle函数,或使用click事件处理程序中的toggleClass函数,如下所示:

$(document).ready(function(){
    $('a#myButton').click(function(){
        $(this).toggleClass("btnClicked");
    });
});

使用jQuery UI效果,您可以设置转换动画:http://jqueryui.com/demos/toggleClass/

4> smonff..：

---

2013年的初步答案

如果你不介意与Bootstrap相关的东西,可以使用一个优秀的(非官方的)Bootstrap Switch.

它使用无线电类型或复选框作为开关.type自V.1.8起添加了一个属性.

源代码可在Github上找到.

2018年的注释

我不建议现在使用那种旧的Switch按钮,因为他们总是看起来像许多人所指出的可用性问题.

请考虑一下这些现代开关.

---

该链接重定向到http://bootstrap-switch.org/,无法加载.使用http://www.bootstrap-switch.org/(带有www;感谢SO在视觉上隐藏了我的链接中的www)而不是加载.

5> Sajeev C..：

---

您可以使用HTML和CSS实现此目的,并将复选框转换为HTML开关.

HTML

CSS

input.cmn-toggle-round + label {
  padding: 2px;
  width: 100px;
  height: 30px;
  background-color: #dddddd;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
}
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 40px;
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transition: margin 0.4s;
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 60px;
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

DEMO

6> outis..：

---

大纲:创建两个元素:滑块/开关和槽作为滑块的父级.要切换状态,请在"on"和"off"类之间切换滑块元素.在一个类的样式中,将"left"设置为0并将"right"保留为默认值; 对于其他类,做相反的事情:

...

或者,只需将背景图像设置为"开"和"关"状态,这比定位更容易.