Jquery tab

Simple  tab using hide and show function in j query

Live Demo Download

Jquery

<script>
$(document).ready(function()
{
$("#home").click(function(){
$("#home").css("background-color","#480");
$("#about").css("background-color","#7E2035");
$("#support").css("background-color","#7E2035");
$("#contact").css("background-color","#7E2035");
$("#tab_home").slideDown("slow");
$("#tab_about").hide();
$("#tab_support").hide();
$("#tab_contact").hide();
});
$("#about").click(function(){

$("#about").css("background-color","#480");
$("#home").css("background-color","#7E2035");
$("#support").css("background-color","#7E2035");
$("#contact").css("background-color","#7E2035");
$("#tab_about").slideDown("slow");
$("#tab_home").hide();
$("#tab_support").hide();
$("#tab_contact").hide();
});
$("#support").click(function(){
$("#support").css("background-color","#480");
$("#home").css("background-color","#7E2035");
$("#about").css("background-color","#7E2035");
$("#contact").css("background-color","#7E2035");
$("#tab_support").slideDown("slow");
$("#tab_home").hide();
$("#tab_about").hide();
$("#tab_contact").hide();
});
$("#contact").click(function(){
$("#contact").css("background-color","#480");
$("#home").css("background-color","#7E2035");
$("#about").css("background-color","#7E2035");
$("#support").css("background-color","#7E2035");
$("#tab_contact").slideDown("slow");
$("#tab_home").hide();
$("#tab_about").hide();
$("#tab_support").hide();
});

});
</script>

CSS

<style type="text/css">
#warp {width:400px;border:1px solid #CCC;float:left;min-height:300px;font-family:"Trebuchet MS";}
#tab_menu {float:left;width:100%;}
#tab_menu a{padding:10px 25px;text-decoration:none;background:#7E2035;color:#FFF;margin-right:1px;float:left;}
#tab_menu a:hover{background:#480;}
#tab_menu .act{background:#480;}
#tab {width:100%;float:left;}
#tab #tab_about,#tab_support,#tab_contact{display:none;}
</style>

Html

<div id="warp">
<div id="tab_menu">
<a href="javascript:void(0)" id="home" class="act">Home</a><a href="javascript:void(0)" id="about">About</a><a href="javascript:void(0)" id="support">Support</a><a href="javascript:void(0)" id="contact">Contact</a><br>
</div>
<div id="tab">
<div id="tab_home">
<h3>Home</h3>
</div>
<div id="tab_about">
<h3>About</h3>
</div>
<div id="tab_support">
<h3>Support</h3>
</div>
<div id="tab_contact">
<h3>Contact</h3>
</div>
</div>
</div>