如何使HTML页面的一个区域重定向到另一URL，而页面的其余部分保持不变？
[英]How to make one area of a html page redirect to another url while the rest part of the page stay same?
问题描述
I'm working on a CMS back-end with Codeigniter. 
我正在使用Codeigniter开发CMS后端。 Maybe it's not clear to state my question with word. 用文字陈述我的问题也许还不清楚。 So I use some simple html code to express my question: There is a html page called A.html . 因此，我使用一些简单的html代码来表达我的问题：有一个名为A.html的html页面。 The code in A.html is following: 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>
I know we can use jQuery's load to change the #content 's content when I click the nav-header .But my question is that how can I make content change just in the content area( #content ) while the rest of page content stay same when I click the link in the content area( #content ). 我知道我们可以在单击nav-header时使用jQuery的负载来更改#content的内容。但是我的问题是，如何才能仅在内容区域（ #content ）中更改内容，而其余页面内容仍然保留单击内容区域中的链接（ #content ）时也是如此。 I have tried the iframe ,but it make the page more complex and I don't like it. 我已经尝试过iframe ，但是它使页面更加复杂，我不喜欢它。 Thanks. 谢谢。
UPDATE: Another example:Such as, I click the "News List" menu item and then the #content change to show news list.Now I click the "Add news" link in the #content , How can I make the #content area show add news form while the rest of the page stay same. 更新：另一个例子：比如，我点击“新闻列表”菜单项，然后将#content的变化，来显示新闻list.Now我点击“添加新闻”的链接#content ，我怎样才能让#content区域显示添加新闻表单，而页面的其余部分保持不变。
2 个解决方案
解决方案1
2 已采纳 2013-09-16 04:21:38
If you want all links to load content into #content , you can use this: 如果希望所有链接将内容加载到#content ，则可以使用以下方法：
$(document).on('click', 'a', function(){
$('#content').load(this.href);
});
But this won't work for external links. 但这不适用于外部链接。
If all your pages have the structure you described for A.html, you can add another div around #content (say, #contentWrapper ), then use .load like this : 如果所有页面都具有针对A.html描述的结构，则可以在#content周围添加另一个div（例如#contentWrapper ），然后使用.load 这样 ：
$(document).on('click', 'a', function(){
$('#contentWrapper').load(this.href + ' #content');
});
If you can't change the HTML, you can use .get instead, and replace the contents manually: 如果您无法更改HTML，则可以改用.get并手动替换内容：
$(document).on('click', 'a', function(){
$('#content').get(this.href, function(data){
var content = $(data).find('#content').html();
$('#content').html(content);
});
});
解决方案2
1 2013-09-16 04:06:36
You would do something like this with jQuery to load the page content with ajax when the user clicks on a navigation link. 您将使用jQuery执行类似的操作，以在用户单击导航链接时使用ajax加载页面内容。 (You would need to add links into your menu first) （您需要先将链接添加到菜单中）
$('.nav-header>a').click(function(){
$('#content').load($(this).attr('href'));
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.