Single page site with css menu, need javascript to fade content in and out depending on clicking the nav

Question

I have a HTML page with a CSS menu.

I want to make this a single page website with the relevant content fading in and out when the CSS menu is clicked.

I want to be able to keep an .active class so that the user can see what content is being shown by the nav bar.

E.G. So if you click on 'about' a div called 'about' fades in with the content for that section (this must be a responsive content area). When you then click on contact the about content fades out and the contact content fades in. I dont know where to start with this pls help.

An example of what im looking for is here http://www.farewelljr.com

and my page is here http://www.hogshouse.com/beardsonwheels/index.html

Answer 1

Here's a very simple example.

This is the code:

function showContent(name) {
    $('#main .' + name).fadeIn(500);
}

$('#menu .link').click(function() {
    if ($(this).hasClass('active')) return false;
    var name = $(this).attr('id');
    var $visible = $('#main .content:visible');
    $('.active').removeClass('active');
    $(this).addClass('active');
    if ($visible.length == 0) showContent(name);
    else $visible.fadeOut(500, function() {    
        showContent(name);
    });
});

If you want to load content with ajax, you can do something like this:

function showContent(name) {
    var url = "/path/to/script";
    $.ajax({
        type:'GET',
        url: url,
        data:{data:name},
        success:function(data) {
            $('#main').html(data).fadeIn(500);
        }
    });
}