Show one div while hiding other divs with jquery when clicking on links

Question

I am trying to create a navigation scheme that has a series of links and number of divs. When I click on link 1 I want to show div 1. If I click on link 2 I want to hide 1 a

Answer 1

Example: http://jsfiddle.net/9UPQj/

        
Property Flyers
        
Open House Flyers
        
Postcards
        
Mortgage Flyers
        
Recruiting Flyers
    


    
1st
    
2nd
    
3rd
    
4th

JS:

$('#navigation a').on('click', function(e) {
    e.preventDefault();
    var index = $('a').index(this) + 1;

    $('div').each(function(){

        if($(this).attr('rel') == index){
            $(this).addClass('active');
            $(this).show();
        }else{
            $(this).removeClass('active');
            $(this).hide();
        }
    });

});