Fatal编程技术网
  • javascript/
  • Javascript 一页上有多个Java脚本

Javascript 一页上有多个Java脚本

javascript jquery html css

Javascript 一页上有多个Java脚本,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在一个网站上工作，这个网站有20多个页面，每隔几个月就会有变化。我决定制作一个脚本来加载导航栏、导航和页脚，就像它们在每个页面上一样 <!DOCTYPE HTML> <html lang="en"> <head> <link href="../css/bootstrap-dropdownhover.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="

我在一个网站上工作，这个网站有20多个页面，每隔几个月就会有变化。我决定制作一个脚本来加载导航栏、导航和页脚，就像它们在每个页面上一样

<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="../css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/myCss.css">
</head> 
<body>

<navbar></navbar>

<div id="nav"></div>

<div class="content"></div>

<footer></footer>

</body>
<script src="../js/loader.js"></script>
<script src="../js/bootstrap-dropdownhover.min.js"></script>
</html>
这可以完美地加载所有页面，但当我尝试悬停导航时，dropdownhaver.min.js无法显示我的下拉菜单。当我将navbar html直接放在页面上并删除loader.js时，它工作得非常好。

您需要在
load（navbar.html）
的回调中加载
bootstrap dropdownhaver.min.js
。请参阅：

加载页眉/导航/页脚后，需要重新初始化引导；请参见

问题在于
引导程序dropdownhaver.min.js
。听起来它只适用于静态元素，而不是动态添加的元素。@cale_b如果事件绑定位于第三方库中，则没有多大帮助。您应该真正考虑通过使用include在服务器端执行此操作。使用此方法意味着您实际上将加载页面的请求数（CSS和图像除外）增加了两倍@Rorymcrossan这听起来是个好主意。我是JS新手，所以我认为这会奏效，但我会查找includes。这里的代码只是一个例子吗？因为我认为不需要有3个
$（document）.ready（…）
语句。你能把这些合起来吗？然后，使用下面答案中列出的回调方法会更容易 
$(document).ready(function() {
    $("navbar").load("../pageFramework/navbar.html");
});

$(document).ready(function() {
    $("#nav").load("../pageFramework/navpills.html");
});

$(document).ready(function() {
    $("footer").load("../pageFramework/footer.html");
});