使用jQuery将导航栏加载到html页面中答案

【问题标题】：Loading navigation bar into html page with jQuery使用jQuery将导航栏加载到html页面中
【发布时间】：2014-08-01 19:01:21
【问题描述】：

我是 ASP 的前（狂热）用户 - 我喜欢它 - 但出于某些原因，我决定继续为我的网站使用基于 linux 的服务器。我什至还没有开始构建我的网站，我已经开始努力尝试用 ASP 做一些非常简单的事情——加载一个恒定的导航栏。

基本上我的目标是拥有一个模板页面 - 一个单一的布局 - 将动态加载我在单独页面中创建的内容。例如；

index.html 会将“navi.html”加载到标有“导航”的 div 中，将“banner.html”加载到标有“banner”的 div 中，等等……所以当用户点击链接时，它不会刷新整个页面，但更改“主” div 中的内容。使用 ASP，这非常简单，但是到目前为止，在我的研究中，我想出的最佳方法是使用 jQuery 将 html 加载到 div 中 - 唯一的问题是它对我不起作用，我不知道也不能找出原因。

代码如下：

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Ace8i</title>
 </head>

<body>

<div id="navigation">
nav div tag is here
</div>


<p onclick="">test</p>

<script type="text/javascript" src="js/jquery.js">
$(document).ready(function(){
$('#navigation').load('navi.html');
});
</script>

</body>
</html>

我创建它的方式基本上与我在网上找到的其他三篇帖子中看到的完全一样，并且我已经在头部和身体上进行了尝试。我还尝试了包含和不包含 document.ready 函数的加载函数。没有错误，只是没有导航栏。

【问题讨论】：

我看到你的代码中没有包含查询库，jquery.com/download
是的，我什至通过使用 jQuery 在单击时隐藏该测试段落来测试它...据我所知，jQuery 正在运行 o_O
如果可以避免的话，这真的不应该用 javascript 来完成。您使用什么后端语言？
我会完全接受有关这样做的建议。就个人而言，我讨厌 JavaScript。这就像 C# 的丑孩子，没人想玩，但他们不得不玩。不知道你所说的后端语言是什么意思，但如果你指的是操作系统，我正在使用 Linux。就像我说的，我是 ASP 迷，但我选择使用 Linux 主机，因为 MySQL 比 Windows SQL-S 可用的信息更多
试试 php include()？ php.net/manual/en/function.include.php 它在 linux 中运行

标签： jquery html

【解决方案1】：

您的脚本标签已经在加载脚本“js/jquery.js”。尝试关闭该标签并为您的内联脚本制作第二个标签。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation').load('navi.html');
});
</script>

JavaScript: Inline Script with SRC Attribute?

【讨论】：

嗯。您是否使用检查器、控制台或查看源确保重新加载的页面反映了更改？
不确定您的意思，但我正在使用 Dreamweaver 并在 Chrome 中进行测试。这对我来说是全新的，我只使用过 Visual Studio for Web。
在 Chrome 中，您应该能够右键单击您的页面并点击“检查元素”按钮。这将为您的网页打开一个调试器。由于您使用的是内联脚本，因此也可以通过右键单击页面然后单击“查看页面信息”来检查您对内联 javascript 的更改是否确实存在，以及是否未加载较旧的缓存版本。
XMLHttpRequest 无法加载文件：///C:/Users/Nicolas/Desktop/Ace8Interactive/Website/WEBSITE/public_html/navi.html。收到无效回复。因此，Origin 'null' 不允许访问。索引.html:1
终于找到了我的问题。我所做的一切都是正确的，但是：我不完全理解这一点，但是 .load 文件无法识别目标 html 文件，因为我在本地进行测试。将我的网站与我的主机同步，对其进行了现场测试，完全可以正常工作。尽管如此，还是感谢您的帮助:)

【解决方案2】：

我相信您已经知道了，但是在寻找同一问题的答案时，我偶然发现了这个问题。如果您在本地进行测试，它将无法正常工作，但如果您将文件放在服务器或本地主机上，您会看到它正在正确执行。

【讨论】：