如何通过单击菜单中的Li将HTML页面加载到DIV中？

Question

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

Answer 1

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>

Answer 2

you will try this code instead

$(document).ready( function() {
    $.get('Home.html', function(data) {
        $("#content").html(data);
    });
});

Answer 3

well from your above code i couldn't see you have created any DIV with the ID : - content So jquery is ok but from the above code i can say....jquery is not able to find the #content div.....

Please see below example which might help in your case : -

<ul>
    <li><a id="page1" href="#">About</a></li>
    <li><a id="page2" href="#">Community</a></li>
    <li><a id="page3" href="#">Sponsor</a></li>
</ul>
<div id="result" style="clear:both;">
</div>

At the head part, we need to include JQuery library.

<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>

Add the following code to head part.

<script type="text/javascript">
    $(document).ready(function(){
       $("#page1").click(function(){
        $('#result').load('pages/page1.html');
         //alert("Thanks for visiting!");
       }); 

       $("#page2").click(function(){
        $('#result').load('pages/page2.html');
         //alert("Thanks for visiting!");
       });
     });
</script>