How to load whole page into a div when clicking a link?

Question

Please, some help would be truly appreciated.

I have read this question and I think i understood the answers

The thing is, I want the other page to be injected into the "main" div when a link is clicked. For example, when I click 2011, I want the page 2011.html to be injected into the "main" div.

    <div id="cssmenu" class="sixteen columns">
        <ul>
           <li><a href='#'><span>2011</span></a></li>
           <li><a href='#'><span>2012</span></a></li>
           <li><a href='#'><span>2013</span></a></li>
           <li><a href='#'><span>Edições Especiais</span></a></li>
           <li><a href='#'><span>Estat&iacute;sticas</span></a></li>
        </ul>
    </div>

    <div id="separator" class="sixteen columns">
    </div>
    <div class="sixteen columns" id="main" style="margin-top: 15px; margin-bottom: 15px">

    </div>

How can I do this?

Thanks in advance!

Answer 1

Try this:

$('li a').click(function (e) {
    e.preventDefault();
    var name = $(this).find('span').text();
    $("#main").load(name + ".html");
});

Demo here

This is a idea for 2011 - 2013 pages, but the ones with name wont work. You need to either give a id to the a element or a data- attr. The best would be to use the links href!

In case you use ID you can use this:

$('li a').click(function (e) {
    e.preventDefault();
    var name = this.id;
    $("#main").load(name + ".html");
});

And demo here

The best option :

Give the <a> element the correct href so it can be properly index by search engines. Like: <a href='2011.html'> . And then use this:

$('li a').click(function (e) {
    e.preventDefault();
    $("#main").load(this.href);
});

Answer 2

I know 2 options:

1. using ajax (asynchronous JavaScript and XML)
   you can learn that here: http://www.w3schools.com/ajax/

2. prepend/append a iframe