How to load a HTML-page into a DIV by clicking a Li inside a menu?

ajax, css, html, javascript, jquery

Solution

You wrote the jQuery code in wrong manners Also please make sure you've are calling jQuery library file.

JavaScript code

$(document).ready(function() {
  $('a').click(function(e) {
    e.preventDefault();
    $("#content").load($(this).attr('href'));
  });
});

HTML Code

<div id="Left">
  <ul id="nav">
    <li><a href="page1.html">Home</a></li>
    <li><a href="page2.html">Page 1</a></li>
    <li><a href="page3.html">Page 2</a></li>
  </ul>
</div>
<div id="content">The page will display here</div>

Problem

i've came across a really annoying issue. So, my plan is to have a UL-menu containing different ammounts of Li inside of it. And when i click each of them i want to load a new HTML-page into my "Content-DIV". I've done alot of research and i found out about Ajax and Jquery. I've tried so many different codes to make it work, and i've managed to link my .js file to my index file sucessfully. I tried it out with a simpel Alert command. But then when i try to load my page into my DIV, it doesnt work at all, and i have no idea whats wrong! I found a link here on stackoverflow which were almost the same, tho they didnt use a menu to open up the pages. So here is 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 ideas? Any answers would be much appreciated. Thank you. /Martin

Original source