0

我正在做一个项目，我绝对别无选择，只能使用只提供静态网页的网络服务器。

这是一个临时解决方案（希望如此），但该站点足够复杂，我需要能够将至少一些菜单分成单独的代码片段以嵌入到每个页面中。

我以为我通过使用 jQuery .load() 函数找到了解决方案。如果我只加载一个东西，这很好用，但如果我尝试加载两个......它只是挂在那里告诉我正在下载图像，没有错误，什么都没有。

这是我正在尝试使用的代码

<!DOCTYPE html>
<html>
<head>
  <title>Test Site</title>
  <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
  <link rel="icon" href="Graphics/Icons/favicon.ico" type="image/vnd.microsoft.icon" />
  <link rel="Shortcut Icon" href="Graphics/Icons/favicon.ico" />
  <link rel="Stylesheet" type="text/css" href="StyleSheets/Main.css" />
  <script type="text/javascript">
    $(document).ready(function () {

      $("#footer").load("WebParts/Footer.html"); 
      $("#header1").load("WebParts/Header.html");     
    });
  </script>
</head>
<body>
  <div id="header1" />
  <div id="content">
    &nbsp;
  </div>
  <div id="footer" />
</body>
</html>

其中有一个带有 .html 文件名的目录 WebParts

footer.html 文件看起来像

 <div>HI! I'm a footer <img src="someimage.png" alt="image description" /></div>

header.html 文件看起来像

 <div>HI! I'm a header! yay look at me</div>

它会加载一个 div，但永远不会再加载任何其他内容。

任何帮助将不胜感激。

4

2 回答 2

2

您必须做的一件事是在您的 jQuery 代码中使用哈希正确定位 div：

$("#footer").load("WebParts/Footer.html"); 
$("#header1").load("WebParts/Header.html");
于 2013-01-11T23:58:49.747 回答
1

我遇到了几件事。希望这会有所帮助：

1）正如其他人所说，我认为您的意思是在content<div id="content">前面不使用 # 。如果这是故意的，那么不要在 ids 中使用 # 可能是个好主意 - 人们可能会将其混淆为错字

2) 在您的 jQuery 中，使用 # 来识别这样的 id：

$("#footer").load("WebParts/Footer.html"); 
$("#header1").load("WebParts/Header.html");

如果您使用不带 # 的 id，则意味着您在 DOM 中引用这些虚构元素：

<footer>...</footer>
<header1>...</header1>

这显然不是你想要的

3）这个应该修复你的代码。代替：

<div id="header1" />
  <div id="#content">
    &nbsp;
  </div>
  <div id="footer" />

利用：

<div id="header1"></div>
  <div id="content">
    &nbsp;
  </div>
  <div id="footer"></div>

上面的代码修复了 id 中的 # 并去掉了自闭合的 div 标签，取而代之的是显式闭合的 div 标签。

我不完全确定 jquery 两者之间的区别是什么，但它使我得到了您的代码的预期结果。希望其他人可以对此有所了解

于 2013-01-12T02:07:12.987 回答