Procedure to load inner pages in inner pages:
Step 1: in index page add js code and link with Id to navigation:
Index.html:
<html>
<head></head>
<body>
<nav>
<ul>
<li id="homePage"><a></a></li>
<li id="aboutPage"><a></a></li>
</ul>
</nav>
<div id="content"></div>
<script>
$(document).ready(function() {
$("#content").load("home.html");
});
$("#homePage").click(function() {
$("#content").load("home.html");
});
$("#aboutPage").click(function() {
$("#content").load("about-us.html");
});
});
</script>
<body>
</html>
now on click of about nav in navigation the about page content will load in in the div of content id link..
step 2: now add id to a button in the page to load another inner page in inner page and add js
to the page in about us page as below:
home.html:
<div id="content2">...........
..........................
...............................
..................................
<button id="aboutPage">more...</button></div>
<script>
$('#content2').on( "click", '#aboutPage', function(e){
$("#content2").load("about-us.html");
});
</script>
now on click of more button u can load about-us page from home page.
No comments:
Post a Comment