Replace a DIV with a HTML File

Question

Hi,

I have created a horizontal menu with 5 tab options using a ul and 5 li tags that is held inside a div

Below this area, I have also create a separate div (id="content1") that will be used to display the content html files based on the tab options selected.

What I am unsure how to accomplish using both JavaScript and jQuery, how can I through a onlick call, replace the div content1 with the html file content? Say I clicked the tab "features" - would like to replace div id content1 with features.html file content?

Any help would be great.

Thanks.

Answer 1

This is easy to do using jQuery and load() to load the remote content and apply it to a div.

Lucky you, there's a great tutorial that explains exactly how to do this! :)

Answer 2

Couldn't your retrieve the file contents via AJAX, and then set the contents of the div with .html()?

Answer 3

Try something like this:

$("#features").click(function(){
   $("#content1").load('features.html');
});