ton*_*nyf 2 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文件,并且真的不想在每个页面中像我的侧边栏菜单一样复制代码,因为只有我的内容会根据菜单选择而改变.
我查看了本教程中的jQuery.load():> nettuts
我认为这不会奏效.还看到了.replacewith(),但是如果这是正确的话可以使用,如果是这样的话,不确定如何在我的场景中使用以及用外部.html文件替换div.
任何帮助将不胜感激,因为我真的希望这是可能的.
谢谢.
jQuery的load方法有一个特殊的语法,允许您从您提供的URL中选择要加载的内容.您只需在URL后指定一个CSS选择器即可.(阅读"加载页面碎片"下的文档)
例如:
$("#thecontent").load("about-us.html #thecontent");
http://jsbin.com/uvera3(可通过http://jsbin.com/uvera3/edit编辑)
| 归档时间： |
|
| 查看次数： |
16070 次 |
| 最近记录： |