Link in one div, trying to load content in a seperate div

Question

Hello, I am using jQuery to make a website, and I want to be able to have my navigation in a separate div from my content. Also, I want to be able to have a sort of tabbed navigation system such that I can click a link in the navigation and it will load the content into the main content div. Basically, I want to do this so that I can just maintain one page with all the content, rather than a bunch of pages for each section. I have included a picture that will hopefully make my question much more clear (right click and "viw image", it's too small on this page):

Answer 1

Have your navigation links change the html of your center div
<a href="#" onclick="$('#centerDiv').html('your content');">Click me<a>

if you want it to be more dynamic use ajax to load it.

and if you want to get a bit more fancy try out the Tab widget

Answer 2

$('#navlink').click(function() {
    $("#maindiv").load("/url.html");
    return false;
});

Answer 3

Using ajax with jQuery its pretty simple and totally controllable:

    $('#navlink').click(function() {
                     $.ajax({
                         type: "GET",
                         url: 'URL_OF_THE_RESOURCE', 
                        //(maybe you can hold this in the href attr of the anchor tag)
                        //in that case you can use $(this).attr('href');
                         dataType: "text/html", //spectating HTML back from the server
                         timeout: 8000, //Wait 8 second for the response
                         error: function() {
                             alert('ERROR');//case of server error or timeout give a feedback to the user
                         }, //end error
                         success: function(html) {
                             $('#mainDiv').html(html); //Replace the content with the new HTML
                         } //end succes
                     });   //end ajax
                     return false;
                 }); //end click

Instead of usign an ID, you could use a dummy class (like "navlink") on all those navlinks, so instead of referencing the selector to the ID, reference it to the class like:

$('.navlink').click(function(){
...

and the url parameter will be:

url: $(this).attr('href'),

That way you just set this once and all the links will get the functionality and still give support to users that don't have JS active.

Answer 4

This calls for the jQuery load() function! Go to http://remysharp.com/jquery-api/ and search for 'load' -- you just need to target the div.

By the way, this is sort of an alternative to frames or server-side includes. The only bad thing about this approach is that Search Engines won't be able to follow your links.

Answer 5

Considering that you want one page with all of the content, you could simple hide all but one main div with css, and then use javascript/jQuery to show one div when a tab is clicked, and hide all of the other (main divs).

Answer 6

Supposing your asynchronous-links have a classname of .ajaxy, you could do something like this:

$("#sidebar a.ajaxy").click(function(e){
  e.preventDefault();
  var url = $(this).attr("href");
  $("#div2").load(url);
});

-

<a href="home.html" class="ajaxy">Home</a>
<a href="gallery.html" class="ajaxy">Gallery</a>

This way the links still work when jQuery is unable to run due to javascript being disabled.