PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

css tab แท็บแบบง่าย ยืดหยุ่น ปรับเพิ่มเติมได้

24 September 2013 By


 เป็น 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>

 


Tags:: css ยืดหยุ่น css tab แท็บ





URL สำหรับอ้างอิง