Load link page content in div on click
Hoping someone can help me with this question, I created a jsfiddle with code that explains what they need
http://jsfiddle.net/pnL1d663/3/
-
I created a basic site code with Header menu, Nav with 6 links, main div and right sidebar,
What I want to achieve is that when the user clicks one of the 6 page links in the nav menu (i.e. clicks on page4.html),
The content of the link to this page that was clicked (i.e. page4.html) is loaded into the main div without the rest of the page (i.e. header, Nav, RightSidebar), updating at all.
This div should remain showing this content (i.e. Page4.html) until the user clicks on the link (i.e. page6.html),
Then only the content in the main div should change from (e.g. page4.html to 6.html page) without any other reload / refresh of the content on the page
-
Hope I was able to clarify what they need to do.
Thank.
code:
<body>
<div class="container">
<div class="header">Site name</div>
<div class="nav">
<ul>
<li><a href="#">Page1.html</a>
</li>
<li><a href="#">Page2.html</a>
</li>
<li><a href="#">Page3.html</a>
</li>
<li><a href="#">Page4.html</a>
</li>
<li><a href="#">Page5.html</a>
</li>
<li><a href="#">Page6.html</a>
</li>
</ul>
</div>
<div class="main">This is the Main Div that will load either page1.html -> page6.html depending on which Nav link the user clicks.. Note that when user clicks the nav link.. Only this div should reload with the content of said clicked page. i.e. If user clicks page4.html link in nva menu. This lightblue div will change from whats written here now and load the content from page4.html in this div but the header, Nav, and rightsidebar of the page will stay static and not refresh at all.</div>
<div class="rightsidebar">blah blah blah blah blah</div>
</div>
CSS
.header {
text-align:center;
width: 100%;
height: 90px;
}
.nav {
float:left;
width:20%;
height: 500px;
background:grey;
}
.main {
float:left;
width:60%;
height: 500px;
background:lightblue;
}
.rightsidebar {
float:right;
width:20%;
height: 500px;
background:lightgreen;
}
source to share
One option is to use jQuery's load function. Give your navigation anchors a unique ID, and from there you can use code like this:
$(function () {
$("#nav_page_a").on("click", function () {
$("#main").load("PageA.html");
});
$("#nav_page_b").on("click", function () {
$("#main").load("PageB.html");
});
});
Have a look at this: http://api.jquery.com/load/
source to share
Add href attributes to your links to the relevant pages you want to navigate to.
<li><a href="Page1.html">Page1.html</a></li>
<li><a href="Page2.html">Page2.html</a></li>
And then the following solution should solve your problem with JQuery
$(function(){
$(".nav li a").click(function(e){
e.preventDefault(); //To prevent the default anchor tag behaviour
var url = this.href;
$(".main").load(url);
});
});
source to share