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

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
css ยืดหยุ่น css tab แท็บ

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



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

 



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











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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ