How to make one area of a html page redirect to another url while the rest part of the page stay same?
Question
I'm working on a CMS back-end with Codeigniter. 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 . The code in A.html is following:
<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 ). I have tried the iframe ,but it make the page more complex and I don't like it. 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.
2 answers
solution1
2 ACCPTED 2013-09-16 04:21:38
If you want all links to load content into #content , you can use this:
$(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 :
$(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:
$(document).on('click', 'a', function(){
$('#content').get(this.href, function(data){
var content = $(data).find('#content').html();
$('#content').html(content);
});
});
solution2
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. (You would need to add links into your menu first)
$('.nav-header>a').click(function(){
$('#content').load($(this).attr('href'));
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.