如何从外部HTML文件加载/替换整个DIV？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何从外部HTML文件加载/替换整个DIV？相关的知识，希望对你有一定的参考价值。
我有以下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（），但不确定这是否正确，如果是的话，不确定如何在我的场景中使用如何使用外部.html文件替换div。
jQuery的load方法有一个特殊的语法，允许您从您提供的URL中选择要加载的内容。您只需在URL后指定一个CSS选择器即可。 （阅读the documentation，在“加载页面碎片”下）
例如：
$("#thecontent").load("about-us.html #thecontent");
主持演示：
http://jsbin.com/uvera3（可通过http://jsbin.com/uvera3/edit编辑）
描述：从服务器加载数据并将返回的HTML放入匹配的元素中。
直接来自.load()的jQuery文档，它将完全按照您的要求进行操作。
$('#thecontent').load('/whereever/about-us.html');
一切都完成了，谢谢！
你试过加载吗？这正是你想要的：
$('#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/向下滚动到关于加载页面片段的部分。
如果服务器包含要替换的图层的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