I have encountered a frustrating issue.
My plan is to create a UL menu with varying amounts of LI elements inside. When each LI element is clicked, I want to load a new HTML page into my "Content-DIV".
I've done extensive research and discovered Ajax and Jquery. Despite trying numerous codes to make it work, I have successfully linked my .js file to my index file. I even tested it with a simple Alert command. However, when I attempt to load the page into my DIV, it doesn't function at all and I am unsure of what's causing the problem! I found a similar link on Stack Overflow, but it didn't involve using a menu to open up the pages.
Here is an excerpt from my index:
<div id="Left">
<ul id="nav" >
<li><a href="Home.html id="load_home">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a>
</ul>
</div>
<div id="content">
</div>
<script>$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("Home.html");
});
});
</script>
Any suggestions? I would greatly appreciate any help. Thank you.
/Martin