jquery和bootstrap之间的冲突
Posted
技术标签:
【中文标题】jquery和bootstrap之间的冲突【英文标题】：Conflict between jquery and bootstrap 【发布时间】：2014-03-02 19:09:11 【问题描述】：我有一个代码，其中在 header.php 中包含 jquery 文件和引导文件。我遇到的问题是，如果我在 bootstrap.js 文件之前包含 jquery 文件，它会弄乱我网页上的其他选项卡，基本上即使我单击其他选项卡它也不会导航我。
我认为 jquery 和 bootstrap 之间存在冲突。我在下面粘贴我的 header.php 文件以供参考。
header.php
<?php require_once "essentials.php";
//error_reporting(~0);
//ini_set('display_errors', 1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>height:150px; width:1300px;</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="script_dbafactory.js?<?php echo rand(0,511);?>"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<img src="./images/source.png">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
<a href="../dbafactory/home_page.php?sub=1" data-toggle="tab">Home</a>
</li>
<li>
<a href="../dbafactory/form_page.php?sub=2" data-toggle="tab">Submit a project</a>
</li>
<li>
<a href="../dbafactory/view_table.php?sub=3" data-toggle="tab">All Projects</a>
</li>
<li>
<a href="#panel-4" data-toggle="tab">Innovative Ideas</a>
</li>
<li>
<a href="#panel-5" data-toggle="tab">Matchmaker</a>
</li>
<li>
<a href="#panel-6" data-toggle="tab">Meet the Team</a>
</li>
<div class="dropdown">
<?php include "userlogin.php"; ?>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
<!--<script type="text/javascript">
//Script to implement tabs
$('#myTab a').click(function (e)
e.preventDefault()
$(this).tab('show')
)
</script>-->
<script>
$.noConflict();
$(document).ready(function ()
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
);
</script>
有人可以告诉我如何解决这个问题吗？以及我应该如何加载所有 js 和 css 文件以避免网页出现任何问题。
谢谢
【问题讨论】：
使用的引导版本？ 您的<div class="dropdown"> 中不能有UL..
bootstrap 3.1.0 - 最新的@ArunPJohny
@Ohgodwhy - 下拉菜单对我来说很好......除了定位......按钮在最右边，下拉菜单在最左边
【参考方案1】：
data-toggle="tab" 对于 bootstrap 意味着必须有一个 [tab panel] 用于它，但是，您只能将它用作导航，这会导致问题。
请阅读：http://getbootstrap.com/javascript/#tabs
另外，使用 js 闭包更容易避免 js 冲突问题：
(function($)
....
)(jQuery);
请检查以下代码，您可以使用 WinMerge 将代码与您自己的代码进行比较：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>height:150px; width:1300px;</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title ?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
<a href="#panel-4">Home</a>
</li>
<li>
<a href="#panel-4">Submit a project</a>
</li>
<li>
<a href="#panel-4">All Projects</a>
</li>
<li>
<a href="#panel-4">Innovative Ideas</a>
</li>
<li>
<a href="#panel-5">Matchmaker</a>
</li>
<li>
<a href="#panel-6">Meet the Team</a>
</li>
<li class="dropdown">
<a id="userlogin" role="button" data-toggle="dropdown" href="#">rdesai<span class="caret"</span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="userlogin">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script>
(function($)
$(document).ready(function ()
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
);
)(jQuery);
</script>
</body>
</html>
【讨论】：
我已经评论了ui JS文件..仍然没有区别:( 你能在你的html页脚加载引导程序吗？ Bootstrap 建议使用它。 另外，bootstrap 是针对 HTML5 的，所以你的XHTML 1.0 Transitional 可能是个问题
我在 【参考方案2】：
通常当我遇到 jquery 和引导程序冲突时，我只需将其添加为我的 php 文件的第一行：
<script>jQuery.noConflict();</script>
这是为了避免与其他库发生冲突。
您可以在这里阅读更多内容：https://api.jquery.com/jQuery.noConflict/
编辑：
或者使用
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
而不是 1.10.3
【讨论】：
在 ... 标签内更准确？ 用 jquery-ui bootstrap 1.10.2 代替 1.10.3 怎么样？ 你能给我从哪里下载的链接吗？ 你不用下载，改成这个就行了。.noConflict() 是一种 jQuery 方法，用于避免使用 $ 作为其他东西的别名的其他库之间的冲突。 bootstrap 组件是建立在 jQuery 之上的，所以这与 jquery 和 bootstrap 的冲突无关以上是关于jquery和bootstrap之间的冲突的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap和jQuery.Gantt的css冲突问题
JQuery Validate 似乎与 Bootstrap 冲突
Jquery UI 和 Bootstrap JS 冲突使自动完成停止工作
Jquery UI和Bootstrap JS冲突使Autocomplete停止工作
求大神，方法行的通追加50分，bootstrap-table.js 按shift键多选复选框 jquery.shiftcheckbox.js 冲突