Currently, I am in the process of developing my personal website. To enhance user experience, I have implemented a vertical navigation bar on the left side of the page. My goal is to replace the content of a specific div with content from other HTML files when a link is clicked on the navigation bar. However, duplicating the navigation code on all pages would not be efficient.
I attempted to use the .load() method for this task, but it seems to require a server. For a simple site where content needs to be replaced dynamically from different HTML files, what alternatives can I explore?
For example:
index.html file
<li><a href="javascript:display_blogs()">Blogs</a></li>
...
<div id="content"></div>
blogs.html file
<div id="GETBLOG">I am a blog.</div>
app.js file
function display_blogs() {
$('#content').load("blogs.html #GETBLOG");
}
Upon clicking the "Blogs" link, the text "I am a blog" should appear in the "content" div.
I need an alternative solution as I suspect that the .load method only functions with a server. Is there a way to accomplish this without relying on a server?