Question

I want to make something like a menu so each menu item contain different content, but I do not want page reload. So I’ve made something like this.

$(document).ready(function() {
    var $hide = $('div#hide'),
        $home = $('div.home'),
        $download = $('div.download'),
        $about = $('div.about'),
        $contact = $('div.contact');

    $hide.css('display', 'none');

    $('a.home').on('click', function() {
        $hide.fadeOut();
        $home.delay(300).fadeIn(2000);
    });

    $('a.download').on('click', function() {
        $hide.fadeOut();
        $download.delay(300).fadeIn(2000);
    });

    $('a.about').on('click', function() {
        $hide.fadeOut();
        $about.delay(300).fadeIn(2000);
    });

    $('a.contact').on('click', function() {
        $hide.fadeOut();
        $contact.delay(300).fadeIn(2000);
    });
});​

Now… I believe that this could be way more cleaner and simplified but I cannot think of anything. I am basically new into jQuery…

Everything works fine, however I have two questions.
1) Can you make this script cleaner a bit?
2) Can you tell me how to load content simultaneously… Currently when home is loaded and I click download, it sort of jump while fadeIn…

Answer 1

You can use preventDefault() method of the event object which prevents the default action of the event.

$('a.home, a.download, a.about, a.contact').on('click', function(event) {
    event.preventDefault();
    var cls = this.className;
    $hide.fadeOut();
    $('.'+cls).delay(300).fadeIn(2000);
});