Question

143

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

rated 0 times [ 149] [ 6] / answers: 1 / hits: 19750 / 10 Years ago, sun, march 23, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

breonnamayah

Add To Favorites

Follow

Total Points: 574

Total Questions: 115

Total Answers: 96

Location: England

Member since Sun, May 21, 2023

1 Year ago

answered 10 Years ago tylerdamiena · Accepted Answer

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>