เป็น css แท็บ อย่างง่าย โดยใช้ร่วมกับ jQuery สามารถนำไปประยุกต์ เพิ่มเติมได้ ตามความเหมาะสม
ตัวอย่าง
111111111111
โค้ดทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css simple tab</title>
</head>
<body>
<style type="text/css">
ul,li,p{margin:0;padding:0;list-style:none}
.css_simple_tab{float:left;width:100%;border-bottom:1px solid #8b0401;height:29px;}
/* css แท็บทั้งหมด */
.css_simple_tab li{float:left;height:29px;margin-right:3px;
border:1px solid #CCCCCC;
border-bottom:0px;
}
.css_simple_tab li i{float:left;width:3px;overflow:hidden;height:29px;}
.css_simple_tab li a{float:left;line-height:25px;padding-top:4px;text-align:center;outline:none;padding:0px 20px;}
.css_simple_tab li a:link{color:#383838}
.css_simple_tab li a:visited{color:#383838}
.css_simple_tab li a:hover{color:#8b0401}
/* css แท็บที่ถูกเลือก */
.css_simple_tab_li{height:30px;
border:1px solid #8b0401 !important;
border-bottom:0px !important;
background-color:#FFF;
}
.css_simple_tab_li a{font-weight:bold !important;color:#8b0401 !important;}
.css_simple_tab_detailed{float:left;width:96%;line-height:23px;padding-top:10px;padding-left:15px;display:none;overflow:hidden}
</style>
<ul class="css_simple_tab">
<li class="css_simple_tab_li"><a href="javascript:void(0);" rel="nofollow" hidefocus="">Data Tab 1</a></li>
<li class=""><a href="javascript:void(0);" rel="nofollow" hidefocus="">Data Tab 2</a></li>
<li class=""><a href="javascript:void(0);" rel="nofollow" hidefocus="">Data Tab 3</a></li>
<li class=""><a href="javascript:void(0);" rel="nofollow" hidefocus="">Data Tab 4</a></li>
</ul>
<div class="css_simple_tab_detailed" style="display: block;">
111111111111
</div>
<div class="css_simple_tab_detailed" style="display: none;">
22222222222
</div>
<div class="css_simple_tab_detailed" style="display: none;">
3333333333
</div>
<div class="css_simple_tab_detailed" style="display: none;">
44444444444
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(".css_simple_tab").find("li").bind("click",function(){ // เมื่อเคลิกที่ แท็บ ใดๆ
var indexObj=$(".css_simple_tab").find("li").index(this); // หาค่า ตำแหน่งแท็บนั้นๆ ที่คลิก เริ่มที่ 0
$(".css_simple_tab").find("li").attr("class",""); // กำหนด class ให้ว่าง สำหรับทุกๆ แท็บ
$(this).attr("class","css_simple_tab_li"); // กำหนด class สำหรับแท็บที่ถูกเลือก
$(".css_simple_tab_detailed").hide().eq(indexObj).show(); // แสดงแท็บที่เลือก และซ่อนแท็บอื่นๆ
});
</script>
</body>
</html>
