我正在使用Codeigniter在CMS后端工作。也许不清楚用文字陈述我的问题。所以我用一些简单的html代码来表达我的问题：有一个名为 A.html 的 html 页面。A.html中的代码如下：
<html>
<head>
/*something*/
</head>
<!-- menu area -->
<div class="menu">
<ul class="nav">
<li class="nav-header">menu item1</li>
<li class="nav-header">menu item2</li>
<li class="nav-header">menu item3</li>
</ul>
</div>
<!-- content area -->
<div id="content">
</div>
</html>
我知道当我单击nav-header时，我们可以使用 jQuery 的负载来更改#content的内容。但我的问题是，当我单击内容区域中的链接（#content）时，我如何仅在内容区域（#content）中更改内容，而其余页面内容保持不变。我已经尝试了iframe，但它使页面更加复杂，我不喜欢它。谢谢。
更新：另一个例子：例如，我单击"新闻列表"菜单项，然后将#content更改为显示新闻列表。现在我点击#content中的"添加新闻"链接，如何让#content区域显示添加新闻表单，而页面的其余部分保持不变。
如果您希望所有链接都将内容加载到 #content 中，您可以使用：
$(document).on('click', 'a', function(){
$('#content').load(this.href);
});
但这不适用于外部链接。
如果你所有的页面都有你为A.html描述的结构，你可以在#content周围添加另一个div（比如#contentWrapper），然后使用这样的.load：
$(document).on('click', 'a', function(){
$('#contentWrapper').load(this.href + ' #content');
});
如果无法更改 HTML，可以改用.get，并手动替换内容：
$(document).on('click', 'a', function(){
$('#content').get(this.href, function(data){
var content = $(data).find('#content').html();
$('#content').html(content);
});
});
你可以用jQuery做这样的事情，在用户点击导航链接时使用ajax加载页面内容。（您需要先在菜单中添加链接）
$('.nav-header>a').click(function(){
$('#content').load($(this).attr('href'));
});