Question

这是我的代码 -

<div id="normal-toggle-button" class="toggle-button" style="width: 100px; height: 25px;">
            <div style="left: 0px; width: 150px;"><input type="checkbox" checked="checked"><span class="labelLeft" style="width: 50px; height: 25px; line-height: 25px;">ON</span><label for="" style="width: 50px; height: 25px;"></label><span class="labelRight" style="width: 50px; height: 25px; line-height: 25px;">OFF </span></div>
        </div>
    </div>

脚本 -

$(document).ready(function() {
        $('#normal-toggle-button').toggleButtons();
    });

我想在此页面上给出一个基本按钮 - Switch buttons

我做得很好。但我仍然错过了一些东西。

在此办理登机手续 - Fiddle

Answer 1

最简单的使用bootstrapSwitch

Demo

<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>

<input type="checkbox">
<script>
  $('input:checkbox').bootstrapSwitch();
</script>

Answer 2

类很重要

您仍然将该课程设为“切换按钮”，将其更改为“切换”

这是您更新的小提琴：http://jsfiddle.net/WvRZw/10/

 <div id="normal-toggle-button" class="toggle-button"....

更改为

  <div id="normal-toggle-button" class="switch" ....

css / javascript包含

您还需要包含引导程序javascript和css（请参阅参考资料部分）（还包括javascript和css：How to get bootstrap buttons to show active state?）

开/关：开关按钮引导程序

2 个答案:

类很重要

css / javascript包含