如何从外部HTML文件加载/替换整个DIV?

时间:2010-08-08 00:10:21

标签: jquery jquery-plugins jquery-selectors

我有以下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文件,即。显示标题/菜单/内容和页脚。

我的问题是,当用户点击“关于我们”菜单选项时,我实际上只想将“thecontent”div替换为我的about-us.html文件的内容,但无需重新加载标题和侧边栏菜单。我只想将整个div“thecontent”替换为来自about-us.html文件的div“thecontent”。

这是否可能像我说的那样,我有几个单独的.html文件,并且真的不想在每个页面中像我的侧边栏菜单一样复制代码,因为只有我的内容会根据菜单选择而改变。

我从this tutorial查看了jQuery.load()。

我认为这不会奏效。还看到了.replacewith(),但不确定这是否正确,如果是的话,不确定如何在我的场景中使用如何使用外部.html文件替换div。

4 个答案:

答案 0 :(得分:6)

jQuery的load方法有一个特殊的语法,允许您从您提供的URL中选择要加载的内容。您只需在URL后指定一个CSS选择器即可。 (阅读“加载页面碎片”下的the documentation

例如:

$("#thecontent").load("about-us.html #thecontent");

托管演示:

http://jsbin.com/uvera3(可通过http://jsbin.com/uvera3/edit编辑)

答案 1 :(得分:0)

你试过加载吗?这正是你想要的:

$('#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/向下滚动到有关加载页面片段的部分。

答案 2 :(得分:0)

  

说明:从服务器加载数据并将返回的HTML放入匹配的元素中。

直接来自.load()的jQuery文档,它将完全完全

$('#thecontent').load('/whereever/about-us.html');

全部完成,谢谢!

.load()

答案 3 :(得分:0)

如果服务器包含要替换的图层的HTML,您可以执行以下操作:

$.get('/server-side.html', function(data)
{
    $('#content').html($(data).html());
});

假设/server-side.html返回类似这样的内容:

<div id="content">
    YOUR CONTENT HERE
</div>

希望它有所帮助。问候。