Javascript jquery和bootstrap之间的冲突
我有一段代码，在header.php中包含jquery文件和引导文件。我遇到了这样的问题：如果在bootstrap.js文件之前包含jquery文件，它会弄乱我网页上的其他选项卡，基本上，即使我单击其他选项卡，它也不会导航到我 我认为jquery和bootstrap之间存在冲突。我将我的header.php文件粘贴到下面以供更多参考 header.phpJavascript jquery和bootstrap之间的冲突,javascript,php,jquery,css,twitter-bootstrap,Javascript,Php,Jquery,Css,Twitter Bootstrap,我有一段代码，在header.php中包含jquery文件和引导文件。我遇到了这样的问题：如果在bootstrap.js文件之前包含jquery文件，它会弄乱我网页上的其他选项卡，基本上，即使我单击其他选项卡，它也不会导航到我 我认为jquery和bootstrap之间存在冲突。我将我的header.php文件粘贴到下面以供更多参考 header.php <?php require_once "essentials.php"; //error_reporting(~0); //ini_se
<?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 alt="logo" 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>
通常，当我遇到jquery和引导冲突时，我只是将其作为php文件的第一行添加：
<script>jQuery.noConflict();</script>
jQuery.noConflict（）；
这是为了避免与其他库发生冲突
您可以在此处阅读更多内容：
编辑：
或使用
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
bootstrap不是1.10.3，而是data toggle=“tab”，这意味着它必须有一个[tab panel]，但是，您只将其用作导航，这导致了问题
请阅读：
另外，使用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>
DBA工厂
-
-
-
-
-
-
-
（函数（$）{
$（文档）.ready（函数（）{
$（'.dropdown toggle'）.dropdown（）；
$（'#userlogin'）。下拉列表（'toggle'）；
});
})（jQuery）；
使用的引导版本？您的UL
中不能有
。引导版本3.1.0-最新版本@ArunPJohny@Ohgodwhy-下拉菜单对我来说很好…除了定位…按钮在最右边，下拉菜单在最右边left@rond因为在ul
它没有被一个li
包裹，更准确地说是在。。。标签？用jquery ui引导程序1.10.2代替1.10.3怎么样？你能告诉我从哪里下载的链接吗？您不必下载，只需更改即可。.noConflict（）
是一种jQuery方法，它使用$
作为其他库的别名来避免其他库之间的冲突。Bootstrap组件构建在jQuery之上，因此这与jQuery和Bootstrap之间的冲突无关。我已经对ui JS文件进行了注释。仍然没有区别：（你能在html的页脚加载引导程序吗？bootstrap建议这样做。此外，引导程序是针对HTML5的，因此你的XHTML 1.0过渡版
可能会出现一个问题，就是在标记之前加载引导程序，但运气不好。选项卡开始工作，但下拉菜单停止工作：（我也认为我可能必须包括HTML5。关于如何做到这一点，有什么建议吗？请阅读：并遵循结构。