สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย

ตัวอย่างผลลัพธ์
 

CSS Code ตัวอย่าง

 

<style type="text/css">
body{
	margin:0;
	padding:0;	
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
}
div#i_containTab{
	position:relative;
	display:block;
	width:500px; /* กำหนดความกว้างทั้งหมด   */
	border:1px solid #CCC;
}
ul#navi_containTab{
	list-style:none;
	padding:0;
	margin:0;	
	width:100%;
	background-color:#FCF;
}
ul#navi_containTab li{
	display:block;
	float:left;
	height:30px;	
	width:100px;  /* กำหนดความกว้างทั้งหมด  หารด้วยจำนวนเมนูแท็บ  */
	border:0px solid #CCC;
	line-height:25px;
	cursor:pointer;
	text-align:center;
}
/* class รูปแบบของแต่ละเมนู */
.tabNavi1{
	background-color:#9C3;	
}
.tabNavi2{
	background-color:#C93;		
}
.tabNavi3{
	background-color:#FC9;		
}
.tabNavi4{
	background-color:#C9F;		
}
.tabNavi5{
	background-color:#F93;		
}

ul#detail_containTab{
	list-style:none;
	padding:0;
	margin:0;	
	width:100%;	
}
ul#detail_containTab li{
	float:left;
	width:100%;
	height:150px;	
}
/* class รูปแบบของแต่ละเนื้อหา */
.detailContent1{
	background-color:#9C3;	
	display:block;
}
.detailContent2{
	background-color:#C93;		
	display:none;
}
.detailContent3{
	background-color:#FC9;	
	display:none;	
}
.detailContent4{
	background-color:#C9F;		
	display:none;
}
.detailContent5{
	background-color:#F93;		
	display:none;
}
</style>

HTML Code ตัวอย่าง
 

<div id="i_containTab">
    <ul id="navi_containTab">
        <li class="tabNavi1">Tab Menu 1</li>
        <li class="tabNavi2">Tab Menu 2</li>
        <li class="tabNavi3">Tab Menu 3</li>
        <li class="tabNavi4">Tab Menu 4</li>
        <li class="tabNavi5">Tab Menu 5</li>
    </ul>
    <ul id="detail_containTab">
        <li class="detailContent1">Detail Data1</li>
        <li class="detailContent2">Detail Data2</li>
        <li class="detailContent3">Detail Data3</li>
        <li class="detailContent4">Detail Data4</li>
        <li class="detailContent5">Detail Data5</li>
    </ul>
</div>

Javascript Code ตัวอย่าง
 

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("ul#navi_containTab > li").click(function(event){
			var menuIndex=$(this).index();
			$("ul#detail_containTab > li:visible").hide();			
			$("ul#detail_containTab > li").eq(menuIndex).show();
	});
});
</script>