PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

24 September 2013 By
ยืดหยุ่น แท็บ css tab css

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ยืดหยุ่น แท็บ css tab css



 เป็น 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 tab แท็บ ยืดหยุ่น css






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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