jQuery( document ).ready( function() {

    $( 'a#tabTop' ).click( function(e) {    // e is the event passed for any browser.  In javascript not jQuery IE was event and w3c was e
        e.preventDefault();                 //  prevent default behavor of element.  And don't use return false because it is both preventDefault() and stopPropagation();
        $( 'div#top' ).hide();              // e is NOT THE SAME as $(this)
        $( 'div#middle').show();
        $( 'div#bottom').show(); 
        
        $( 'div#paneMiddle').hide();
        $( 'div#paneBottom').hide();   
        $( 'div#paneTop').show();       
    });

    $( 'a#tabMiddle' ).click( function(e) {
        e.preventDefault(); 
        $( 'div#middle' ).hide();
        $( 'div#top').show();
        $( 'div#bottom').show(); 
        
        $( 'div#paneTop').hide();
        $( 'div#paneBottom').hide();
        $( 'div#paneMiddle').show();           
    });

    $( 'a#tabBottom' ).click( function(e) {
        e.preventDefault(); 
        $( 'div#bottom' ).hide();
        $( 'div#top').show();
        $( 'div#middle').show(); 
        
        $( 'div#paneTop').hide();                   // you have to hide the other 2 panes before you show the third pane because all 3 panes are in the same location of each other with no z-index 
        $( 'div#paneMiddle').hide();   
        $( 'div#paneBottom').show();
    });

});