Bootstarp风格的toggle效果分享

前端之家收集整理的这篇文章主要介绍了Bootstarp风格的toggle效果分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在写项目的时候想要一个这样的效果

我知道这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui;

  这个效果依赖html5的transition, 所以浏览器兼容成问题;

  从flat-ui中把这个效果的js和html,以及css给拨离出来;

  整体的代码如下:

运行下面代码

<Meta charset="utf-8"/>

toggle的demo

dio" for="toggleOption2">ON dio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked"> dio" name="toggleOptions" id="toggleOption2" value="option2">

整体的效果是依赖于jQuery, 当用户点击了label按钮会触发input的click事件, 然后判断给父级添加不同的classname;

猜你在找的JavaScript相关文章