javascript - 带有 Bootstrap 的 jquery 的脚本顺序

标签 javascript jquery html jquery-ui twitter-bootstrap

我是 jquery 和 bootstrap 的新手,我无法让它们很好地相互配合。我有一个包含 Bootstrap 下拉菜单和 jquery slider 的页面。但是,我无法让他们同时工作。

Bootstrap 下拉菜单适用于此文件,而 slider 会中断

<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="/js/slider_input.js"></script>
</head>

<body>
....
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script> 

</body
</html

像这样删除倒数第二行:

slider 正常工作, Bootstrap 下拉菜单中断

<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="/js/slider_input.js"></script>
</head>

<body>
....

    <script src="/bootstrap/js/bootstrap.min.js"></script> 

</body
</html

最佳答案

哦,是的,现在我看到抱歉了。您必须先加载实际的 jquery,否则 UI 也不会工作。所以这应该是头部

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
<script src="/js/slider_input.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

同样在 html5 中你需要去掉'type="text/javascript"',就像 Bootstrap 一样,也要保持一致,所以如果你有它,也将它添加到 Bootstrap 中,它必须处理加载规则。

关于javascript - 带有 Bootstrap 的 jquery 的脚本顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16926086/

相关文章:

javascript - CSS:在右下角设置div

javascript - Javascript左侧和顶部导航事件状态

java - 避免 gwt 中的 double 指数

javascript - 处理返回 promise 或空值的函数

javascript - 自动滚动到鼠标滚轮的下一个 anchor

javascript - 单击填充图像映射并设置变量

javascript - 处理 iOS 虚拟键盘 “previous” , “next” , “Go/Enter” 按钮

javascript - 如果选中复选框,则激活字段

javascript - 如何检查列表是否可排序?

javascript - 如何使用 JavaScript 更改 Canvas 上图像的窗口级别