如何从外部 HTML 文件加载/替换整个 DIV？
Posted
技术标签:
【中文标题】如何从外部 HTML 文件加载/替换整个 DIV？【英文标题】：How to load/replace an entire DIV from an external HTML file? 【发布时间】：2011-03-26 20:13:48 【问题描述】：我有以下 index.html 页面设置：
<html>
<head>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="sidebar_menu">
</div>
<div id="thecontent">
<div id="page_banner">
</div>
<div id="page_content">
</div>
<div id="page_footer">
</div>
</div>
</div>
</body>
</html>
除此之外，我还有几个单独的 .html 文件反映了我的侧边栏菜单中的一个选项，因此当用户第一次登陆页面时，他们将看到基于上述设置的 index.html 文件，即。显示页眉/菜单/内容和页脚。
我的问题是，当用户点击“关于我们”菜单选项时，我实际上只想用 about-us.html 文件的内容替换“thecontent” div，但不重新加载标题和侧边栏菜单.我只想将整个 div “thecontent” 替换为 about-us.html 文件中的 div “thecontent”。
这可能像我说的那样吗，我有几个单独的 .html 文件，并且真的不想在每个页面中复制像我的侧边栏菜单这样的代码，因为只有我的内容会根据菜单选择而改变。
我从this tutorial查看了jQuery.load()。
我认为虽然这行不通。还看到了 .replacewith() 但不确定这是否正确，如果正确，不确定如何在我的场景中使用来关闭并将 div 替换为外部 .html 文件。
【问题讨论】：
【参考方案1】：jQuery 的 load 方法有一个特殊的语法，允许你从你提供的 URL 中选择你想要加载的内容。您只需在 URL 后指定一个 CSS 选择器。 （阅读the documentation，在“加载页面片段”下）
例如：
$("#thecontent").load("about-us.html #thecontent");
托管演示：
http://jsbin.com/uvera3（可通过http://jsbin.com/uvera3/edit编辑）
【讨论】：
如果你这样做，你有类似 html>body>thecontent>thecontent 之类的东西，我们希望只有 html>body>thecontent @BenZen，您可以通过使用$("#thecontent").load("about-us.html #thecontent>*"); 来避免#thecontent 的嵌套，这将只提取#thecontent 的子元素并将它们注入现有的#thecontent 元素中。【参考方案2】：
说明：从服务器加载数据，并将返回的 HTML 放入匹配的元素中。
这直接来自 .load() 的 jQuery 文档，它将完全满足您的要求。
$('#thecontent').load('/whereever/about-us.html');
全部完成，谢谢！
.load()
【讨论】：
嗨，实际上确实使用了 .load() 调用，但这实际上用我的 about-us.html 文件的完整内容替换了我的整个 index.html，包括侧边栏菜单，我的 about- us.html 文件没有提及 - 任何想法？ @tonsils 我遇到了同样的问题 - 尝试在我的 index.html 中加载导航栏完全清除了我的 index.html 中的所有其他内容 - 你有没有弄清楚是什么原因造成的？ 【参考方案3】：你试过加载吗？这正是你想要的：
$('#thecontent`').load('about-us.html');
绑定到一个链接：
$(function()
$("#aboutuslink").click(function()
$('#thecontent`').load('about-us.html');
return false;
) ;
);
<a href="#" id="aboutuslink">About Us</a>
在http://api.jquery.com/load/ 向下滚动到关于加载页面片段的部分。
【讨论】：
嗨，李。试过了，但正如我在下面对 jAndy 提到的，替换了我的整个 index.html 文件 + 侧边栏菜单，这不是我想要的？【参考方案4】：如果服务器包含要替换的图层的 HTML，您可以执行以下操作：
$.get('/server-side.html', function(data)
$('#content').html($(data).html());
);
假设 /server-side.html 返回如下内容：
<div id="content">
YOUR CONTENT HERE
</div>
希望对您有所帮助。问候。
【讨论】：
以上是关于如何从外部 HTML 文件加载/替换整个 DIV？的主要内容，如果未能解决你的问题，请参考以下文章
如何从多个子菜单项将外部 div 加载到 master.html div