Hi,
I have the following index.html page set-up:
<html>
<head>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="sidebar_menu">
</div>
<div id="thecontent">
<div id="page_banner">
</div>
<div id="page_content">
</div>
<div id="page_footer">
</div>
</div>
</div>
</body>
</html>
In addition to this, I have several individual .html files that reflect an option in my sidebar menu, so when the user first lands on the page, they will see index.html file based on the above setup, ie. shows header/menu/the content and footer.
My question is, when the user clicks on say the "About Us" menu option, I actually want to just replace "thecontent" div with the contents of my about-us.html file but without reloading the header and sidebar menu. I just want the entire div "thecontent" to be replaced with the div "thecontent" from my about-us.html file.
Is this possible as like I said, I have several individual .html files and really don't want to duplicate code like my sidebar menu in every page as only my content will be changing based on menu selection.
I looked at jQuery.load() from this tutorial:> nettuts
I think though this will not work. Also saw the .replacewith() but usure if this is correct and if it is, unsure how to use in my scenario to go off and replace div with an external .html file.
Any help would be appreciated as I really hope this is possible.
Thanks.