javascript - 如何在我们的 javascript 中触发 Bootstrap

标签 javascript jquery html css twitter-bootstrap

http://getbootstrap.com/javascript/#buttons

这里他们给出了 bootsrtap 中单选按钮切换的演示..

我正在尝试在我的代码中使用它...但是事件没有切换问题是什么...

我的cdn

在此处输入代码

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">    </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">        </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

我的脚本

$(document).ready(function() {
    $('.btn').button('toggle')
});

我的代码

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option" value="a" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options" value="b"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="optionsa" value="c"> Option 3
</label>
</div>

最佳答案

您的 JavaScript 包含的顺序错误。

Bootstrap 依赖于 jQuery。确保您首先定义了它。

示例:http://jsbin.com/citizeqecupi/1/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">        </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">    </script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <script>
    $(document).ready(function() {
      $('.btn').button()
    });

  </script>

</head>
<body>

  <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option" value="a" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options" value="b"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="optionsa" value="c"> Option 3
</label>
</div>

</body>
</html>

关于javascript - 如何在我们的 javascript 中触发 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25719334/

相关文章:

javascript - 强制图像在 Chrome 上的 Javascript 中重新加载?

javascript - 如何混合选择 2 加载远程数据与初始选择

javascript - document.forms.submit 挂了我的页面

html - 了解 flex 增长

javascript 在 Php echo 中追加?

javascript - 在对象数组中按特定键对分组值进行计数

jquery - 如何在 javascript 中访问从 php 创建的 json 数组

javascript - jQuery 动态加载图像无法显示多个图像如何替换 src= 并且不附加到它

javascript - 如何使菜单从视口(viewport)滑动到标题

php - 更改 HTML 属性值