Mega easy menu tabs

by lennyekberg

HTML

<a id="show_div1" class="selector current">Div1</a>
<a id="show_div2" class="selector">Div2</a>


<div id='div1' class='panel'> div1 visible. Mich!</div>
<div id='div2' class='panel'> div2 visible. Mach!</div>

CSS

a{cursor:pointer;}

#div1{
    background-color:red;
}
#div2{
    background-color:yellow;
}

#div1,
#div2{
    display:none;
}

.current{
    color: red;
    background-color:aqua;
}

JavaScript

jQuery(document).ready(function() {
        
    function show_div1() {
        jQuery('div.panel:visible').hide();
        jQuery('#div1').show();
    }
    
    function show_div2() {
        jQuery('div.panel:visible').hide();
        jQuery('#div2').show();
    }


    jQuery("#show_div1").click(function() {
    	show_div1();
    });
     
    jQuery("#show_div2").click(function() {
    	show_div2();
    });

    
    jQuery(".selector").click(function() {
    	jQuery('.selector').removeClass('current');
		jQuery(this).addClass('current');
	});
    
    //show #div1 on load
    show_div1();
        
});