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):

example .jpg

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):

example http://img402.imageshack.us/img402/1733/examplew.jpg

• javascript
• jquery
• css

Share Improve this question Follow asked Dec 17, 2009 at 18:32 deversdevers 16311 silver badge1111 bronze badges 2

• 6 +1 for hand drawn circles! – Joel Commented Dec 17, 2009 at 18:34
• Are you looking to do all client-side or do you have a db to pull data from? – Brian Kim Commented Dec 17, 2009 at 18:35

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

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

I would encourage you to use event delegation. For instance we can use the .on method to attach a single event to the navigation pane that will listen for clicks on links:

$("#navigation").on("click", "a", function(e){
    e.preventDefault();
    $("#content").load( $(this).prop("href") );
});

Which works with the following markup:

<div id="navigation">
    <a href="home.html">Home</a>
    <a href="gallery.html">Gallery</a>
</div>
<div id="content"><!-- content will load here --></div>

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).

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

This calls for the jQuery load() function! Go to http://remysharp./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.

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.