我正在使用 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
like this :
$(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);
});
});
关于javascript - 如何使 html 页面的一个区域重定向到另一个 url 而页面的其余部分保持不变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18820233/