Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > PHP > PHP Forum > ขอความช่วยเหลือเรื่อง jquery switch tab หน่อยครับ ติดปัญหาอยู่นิดหน่อย


ขอความช่วยเหลือเรื่อง jquery switch tab หน่อยครับ ติดปัญหาอยู่นิดหน่อย

 
Topic : 093653



โพสกระทู้ ( 1,322 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์



Code (PHP)
<!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>TEST TAB</title>
<style type="text/css">
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	/*border-bottom: 1px solid #4b4722;*/
		width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0 auto;
	cursor: pointer;
	padding: 0px 10px;
	height: 31px;
	line-height: 31px;
	/*border: 1px solid #999999;*/
		/*border-left: none;*/
		font-weight: bold;
	background: #f8f8f8;
	overflow: hidden;
	position: relative;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:5px;
	color:#a6a79f;
	font-family:tahoma;
	font-size:14px;
	text-align:center;
	border:solid 1px #a6a79f;
}
ul.tabs li:hover {
	background: #ff5c00;
}
ul.tabs li.active {
	background: #f8f8f8;
	border:solid 1px #4b4722;
	color:#4b4722;
}
.tab_container {
	/*		border: 1px solid #999999;*/
/*		border-top: none;*/
		clear: both;
	float: left;
	width: 100%;
	background: #f8f8f8;
	color:#000;
	margin-bottom:10px;
}
.tab_content {
	padding: 20px;
	/*font-size: 1.2em;*/
		display: none;
	font-family:tahoma;
	font-size:13px;
	color:#000;
	line-height:16px;
}
.tab_content a:link {
	color: #09C;
	text-decoration:none;
}
.tab_content a:visited {
	color: #09C;
	text-decoration:none;
}
.tab_content a:hover {
	color: #333;
	text-decoration:none;
}
.tab_content a:active {
	color: #09C;
	text-decoration:none;
}
.tab_content2 {
	padding: 20px;
	/*font-size: 1.2em;*/
		display: none;
	font-family:tahoma;
	font-size:13px;
	color:#000;
	line-height:16px;
}
.tab_content2 a:link {
	color: #09C;
	text-decoration:none;
}
.tab_content2 a:visited {
	color: #09C;
	text-decoration:none;
}
.tab_content2 a:hover {
	color: #333;
	text-decoration:none;
}
.tab_content2 a:active {
	color: #09C;
	text-decoration:none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	$(".tab_content").hide();
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel"); 
		$("#"+activeTab).fadeIn(); 
	});



	$(".tab_content2").hide();
	$(".tab_content2:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content2").hide();
		var activeTab2 = $(this).attr("rel"); 
		$("#"+activeTab2).fadeIn(); 
	});

});

</script>
</head>

<body>
<div class="tab_container">
  <div id="tab1" class="tab_content">TOP CONTENT 01</div>
  <div id="tab2" class="tab_content">TOP CONTENT 02</div>
</div>
</div>
<ul class="tabs">
  <li class="active" rel="tab1" style="margin-left:60px;">Tab 01</li>
  <li rel="tab2">Tab 02</li>
</ul>
<div class="tab_container">
  <div id="tab1" class="tab_content2"> BOTTOM CONTENT 01<br />
  </div>
  <div id="tab2" class="tab_content2"> BOTTOM CONTENT 02<br />
  </div>
</div>
</body>
</html>



ปัญหาคือถ้าเป็นการแสดง content บนหรือล่างอย่างเดียว จะไม่ปัญหาครับ
แต่ผมอยากให้มันแสดงทั้งบนทั้งล่าง ผมควรต้องทำยังไงดีครับ

ขอบคุณครับ



Tag : PHP, HTML/CSS, JavaScript, jQuery
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2013-04-10 11:57:21 By : pokultra View : 771 Reply : 3
 

 

No. 1



โพสกระทู้ ( 615 )
บทความ ( 4 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


แบบนี้หรอครับ...

Code (PHP)
<!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" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<title>TEST TAB</title>
<style type="text/css">
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	/*border-bottom: 1px solid #4b4722;*/
		width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0 auto;
	cursor: pointer;
	padding: 0px 10px;
	height: 31px;
	line-height: 31px;
	/*border: 1px solid #999999;*/
		/*border-left: none;*/
		font-weight: bold;
	background: #f8f8f8;
	overflow: hidden;
	position: relative;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:5px;
	color:#a6a79f;
	font-family:tahoma;
	font-size:14px;
	text-align:center;
	border:solid 1px #a6a79f;
}
ul.tabs li:hover {
	background: #ff5c00;
}
ul.tabs li.active {
	background: #f8f8f8;
	border:solid 1px #4b4722;
	color:#4b4722;
}
.tab_container {
	/*		border: 1px solid #999999;*/
/*		border-top: none;*/
		clear: both;
	float: left;
	width: 100%;
	background: #f8f8f8;
	color:#000;
	margin-bottom:10px;
}
.tab_content {
	padding: 20px;
	/*font-size: 1.2em;*/
		display: none;
	font-family:tahoma;
	font-size:13px;
	color:#000;
	line-height:16px;
}
.tab_content a:link {
	color: #09C;
	text-decoration:none;
}
.tab_content a:visited {
	color: #09C;
	text-decoration:none;
}
.tab_content a:hover {
	color: #333;
	text-decoration:none;
}
.tab_content a:active {
	color: #09C;
	text-decoration:none;
}
.tab_content2 {
	padding: 20px;
	/*font-size: 1.2em;*/
		display: none;
	font-family:tahoma;
	font-size:13px;
	color:#000;
	line-height:16px;
}
.tab_content2 a:link {
	color: #09C;
	text-decoration:none;
}
.tab_content2 a:visited {
	color: #09C;
	text-decoration:none;
}
.tab_content2 a:hover {
	color: #333;
	text-decoration:none;
}
.tab_content2 a:active {
	color: #09C;
	text-decoration:none;
}
</style>
<script type="text/javascript">

$(document).ready(function() {
        $(".tab_content div").hide();
	$("#ttab1, #btab1").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel"); 
		$("#t"+activeTab).fadeIn();
                $("#b"+activeTab).fadeIn();
	});
});

</script>
</head>

<body>
<div class="tab_container">
  <div id="ttab1" class="tab_content">TOP CONTENT 01</div>
  <div id="ttab2" class="tab_content">TOP CONTENT 02</div>
</div>
</div>
<ul class="tabs">
  <li class="active" rel="tab1" style="margin-left:60px;">Tab 01</li>
  <li rel="tab2">Tab 02</li>
</ul>
<div class="tab_container">
  <div id="btab1" class="tab_content"> BOTTOM CONTENT 01<br />
  </div>
  <div id="btab2" class="tab_content"> BOTTOM CONTENT 02<br />
  </div>
</div>
</body>
</html>



ประวัติการแก้ไข
2013-04-10 12:41:41
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-04-10 12:39:56 By : t-monroe
 

 

No. 2

Guest


Code (PHP)
<!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>TEST TAB</title>
<style type="text/css">
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	/*border-bottom: 1px solid #4b4722;*/
		width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0 auto;
	cursor: pointer;
	padding: 0px 10px;
	height: 31px;
	line-height: 31px;
	/*border: 1px solid #999999;*/
		/*border-left: none;*/
		font-weight: bold;
	background: #f8f8f8;
	overflow: hidden;
	position: relative;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:5px;
	color:#a6a79f;
	font-family:tahoma;
	font-size:14px;
	text-align:center;
	border:solid 1px #a6a79f;
}
ul.tabs li:hover {
	background: #ff5c00;
}
ul.tabs li.active {
	background: #f8f8f8;
	border:solid 1px #4b4722;
	color:#4b4722;
}
.tab_container {
	/*		border: 1px solid #999999;*/
/*		border-top: none;*/
		clear: both;
	float: left;
	width: 100%;
	background: #f8f8f8;
	color:#000;
	margin-bottom:10px;
}
.tab_content {
	padding: 20px;
	/*font-size: 1.2em;*/
		display: none;
	font-family:tahoma;
	font-size:13px;
	color:#000;
	line-height:16px;
}
.tab_content a:link {
	color: #09C;
	text-decoration:none;
}
.tab_content a:visited {
	color: #09C;
	text-decoration:none;
}
.tab_content a:hover {
	color: #333;
	text-decoration:none;
}
.tab_content a:active {
	color: #09C;
	text-decoration:none;
}
.tab_content2 {
	padding: 20px;
	/*font-size: 1.2em;*/
		display: none;
	font-family:tahoma;
	font-size:13px;
	color:#000;
	line-height:16px;
}
.tab_content2 a:link {
	color: #09C;
	text-decoration:none;
}
.tab_content2 a:visited {
	color: #09C;
	text-decoration:none;
}
.tab_content2 a:hover {
	color: #333;
	text-decoration:none;
}
.tab_content2 a:active {
	color: #09C;
	text-decoration:none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	$(".tab_content").hide();
	$(".tab_content:first").show(); 
	
	$(".tab_content2").hide();
	$(".tab_content2:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		$(".tab_content2").hide();
		var activeTab = $(this).attr("rel"); 
		$("."+activeTab).fadeIn(); 
	});
	

	/*$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content2").hide();
		var activeTab2 = $(this).attr("rel"); 
		$("#"+activeTab2).fadeIn(); 
	});
*/
});

</script>
</head>

<body>
<div class="tab_container">
  <div class="tab_content tab1">TOP CONTENT 01</div>
  <div class="tab_content tab2">TOP CONTENT 02</div>
</div>
</div>
<ul class="tabs">
  <li class="active" rel="tab1" style="margin-left:60px;">Tab 01</li>
  <li rel="tab2">Tab 02</li>
</ul>
<div class="tab_container">
  <div class="tab_content2 tab1"> BOTTOM CONTENT 01<br />
  </div>
  <div class="tab_content2 tab2"> BOTTOM CONTENT 02<br />
  </div>
</div>
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-04-10 12:46:00 By : WiTT
 

 

No. 3



โพสกระทู้ ( 1,322 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


ขอบคุณมากนะครับ... ได้ตามความต้องการเลยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-04-10 13:05:56 By : pokultra
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : ขอความช่วยเหลือเรื่อง jquery switch tab หน่อยครับ ติดปัญหาอยู่นิดหน่อย
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่