Tabmenu

• JavaScript
• CSS
• HTML
• jQuery

• $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
  $("ul.tab li a").click(function(){
  	$("ul.tab li a").removeClass("selected");
  	$(this).addClass("selected");
  	$("ul.panel li").hide();
  	$($(this).attr("href")).show();
  	return false;
  });	
  

• ul.tab {display:block;width:100%;background:#111;}
  ul.tab:after {display:block;visibility:hidden;clear:both;content:""}
  ul.tab li {display:block;float:left;width:25%;}
  ul.tab li a {display:block;color:#fff;line-height:50px;text-align:center;background:#111;}
  ul.tab li a.selected {background:#37be00}
  

• <ul class="tab"> <li><a href="#tab1" class="selected">JavaScript</a></li> <li><a href="#tab2">CSS</a></li> <li><a href="#tab3">HTML</a></li> <li><a href="#tab4">jQuery</a></li> </ul> <ul class="panel"> <li id="tab1"></li> <li id="tab2"></li> <li id="tab3"></li> <li id="tab4"></li> </ul>

• $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
  $("ul.tab li a").click(function(){
  	$("ul.tab li a").removeClass("selected");
  	$(this).addClass("selected");
  	$("ul.panel li").hide();
  	$($(this).attr("href")).show();
  	return false;
  });