【发布时间】：2018-01-28 12:37:05
【问题描述】：
我想要做什么
使用本地服务器在链接的 .js 文件中使用 .load 函数将 HTML 文件加载到页面上的内容块中。
我正在使用什么
HTML
CSS
Javascript/jQuery
WAMP
铬
视窗 10
问题
我可以在页面内成功执行此操作，但在使用链接文件时无法正常工作（事实上，当我使用链接文件时，我无法让 任何 JavaScript 工作文件），我宁愿能够维护一个单独的 .js 文件。
我做了什么
- 检查拼写
- 检查的文件路径
- 阅读类似的 SO 问题和 cmets（没有帮助）
- 重启了我的电脑（为什么不呢？）
- 在使用 WAMP 之前，尝试在允许本地文件访问的情况下启动 Chrome。这工作了几分钟......直到它不再起作用了。
注意事项
- 我对 JavaScript 和 jQuery 还很陌生。
- 链接的 .css 文件从未给我带来任何麻烦。
- 是的，nav.html 与 index.html 位于同一目录中。
- 是的，js文件夹和index.html在同一个目录下，design.js确实在那个文件夹里。
- WAMP 图标为绿色，我能够成功设置 VirtualHost。
不适合我的代码
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="js/design.js"></script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
</body>
</html>
design.js
$(document).ready(function() {
loadNav();
});
function loadNav(){
$('nav').load('nav.html');
}
或
design.js
$(document).ready(function() {
$('nav').load('nav.html');
});
适合我的代码
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('nav').load('nav.html');
});
</script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
</body>
</html>
或
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
<script>
$('nav').load('nav.html');
</script>
</body>
</html>
【问题讨论】：
标签： javascript jquery html css wamp