รบกวนช่วยเขียน code js หน่อยครับ
File: Tab_Page.html
<div id="i_containTab">
<ul id="navi_containTab">
<li class="tabNavi1">Tab Menu 1</li>
<li class="tabNavi2">Tab Menu 2</li>
<li class="tabNavi3"><a name="tab3">Tab Menu 3</a> </li>
<li class="tabNavi4">Tab Menu 4</li>
<li class="tabNavi5">Tab Menu 5</li>
</ul>
<ul id="detail_containTab">
<li class="detailContent1">Detail Data1</li>
<li class="detailContent2">Detail Data2</li>
<li class="detailContent3">Detail Data3</li>
<li class="detailContent4">Detail Data4</li>
<li class="detailContent5">Detail Data5</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul#navi_containTab > li").click(function(event){
var menuIndex=$(this).index();
$("ul#detail_containTab > li:visible").hide();
$("ul#detail_containTab > li").eq(menuIndex).show();
});
});
</script>
code Tab ข้างบนใช้งานได้ปกติดี ถ้าทำงานที่หน้ามันเอง(Tab_Page.html)
แต่ถ้าเรียกจากหน้าอื่น ด้วย anchor tag มันจะแสดงผลเฉพาะ Tab1
<a href="w3.xxxxx.c0m/Tab_Page.html#tab3">Goto Tab 3</a>
คิดว่ามันทำงานถูก แต่เพราะ Tab อื่นๆถูก hidden ไว้ มันเลยแสดงผลแต่ Tab1
อันนี้ดูจาก firebug
<li class="detailContent1" style="display: block;">
<li class="detailContent2" style="display: none;">
<li class="detailContent3" style="display: none;">
จะเขียน code/function ยังไงครับเมื่อเรียก anchor tag #tab3 จากหน้า Tab_Page.html
<a href="w3.xxxxx.c0m/Tab_Page.html#tab3">Goto Tab 3</a>
แล้วไปเปลี่ยน
<li class="detailContent3" style="display: none;">
เป็น
<li class="detailContent3" style="display: block;">
รบกวนด้วยครับ :wanwan017:
อ้างถึงจาก: pkr4life ใน 28 กุมภาพันธ์ 2013, 18:31:36
ลองมั่วดู :P
<script type="text/javascript">
$(function () {
$("ul#navi_containTab > li").click(function (event) {
var menuIndex = $(this).index();
$("ul#detail_containTab > li:visible").hide();
$("ul#detail_containTab > li").eq(menuIndex).show();
});
var anchorTag = getAnchorTag();
var tabIndex = -1;
switch (anchorTag) {
case "tab1":
tabIndex = 0;
break;
case "tab2":
tabIndex = 1;
break;
case "tab3":
tabIndex = 2;
break;
case "tab4":
tabIndex = 3;
break;
case "tab5":
tabIndex = 4;
break;
}
if (tabIndex > -1) {
$("ul#detail_containTab > li:visible").hide();
$("ul#detail_containTab > li").eq(tabIndex).show();
}
});
function getAnchorTag() {
var anchorTag = window.location.href.slice(window.location.href.indexOf('#') 1)
return anchorTag;
}
</script>
ผมลองแล้วไม่ได้ครับ tab ที่เคยใช้ได้ก็ใช้ไม่ได้ คลิกแล้วไม่ไปไหนเลยครับ :-X
แต่ 1 ให้ในน้ำใจที่มาช่วยตอบครับ :wanwan003:
อ้างถึงจาก: pkr4life ใน 28 กุมภาพันธ์ 2013, 23:57:08
ผมลองแล้ว ได้อยู่นะคับ
ลองดูแบบเต็มๆ
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul#navi_containTab > li").click(function (event) {
var menuIndex = $(this).index();
$("ul#detail_containTab > li:visible").hide();
$("ul#detail_containTab > li").eq(menuIndex).show();
});
var anchorTag = getAnchorTag();
var tabIndex = -1;
switch (anchorTag) {
case "tab1":
tabIndex = 0;
break;
case "tab2":
tabIndex = 1;
break;
case "tab3":
tabIndex = 2;
break;
case "tab4":
tabIndex = 3;
break;
case "tab5":
tabIndex = 4;
break;
}
if (tabIndex > -1) {
$("ul#detail_containTab > li:visible").hide();
$("ul#detail_containTab > li").eq(tabIndex).show();
}
});
function getAnchorTag() {
var anchorTag = window.location.href.slice(window.location.href.indexOf('#') 1)
return anchorTag;
}
</script>
</head>
<body>
<div id="i_containTab">
<ul id="navi_containTab">
<li class="tabNavi1">Tab Menu 1</li>
<li class="tabNavi2">Tab Menu 2</li>
<li class="tabNavi3">Tab Menu 3</li>
<li class="tabNavi4">Tab Menu 4</li>
<li class="tabNavi5">Tab Menu 5</li>
</ul>
<ul id="detail_containTab">
<li class="detailContent1">Detail Data1</li>
<li class="detailContent2">Detail Data2</li>
<li class="detailContent3">Detail Data3</li>
<li class="detailContent4">Detail Data4</li>
<li class="detailContent5">Detail Data5</li>
</ul>
</div>
</body>
</html>
ผมลองอีกหลายรอบก็ยังไม่ได้อ่ะครับ ทั้ง FF Chrome แล้วก็ IE แต่ถ้า remark ส่วนที่ท่านเพิ่มก็ทำงานปกติครับ หรือว่าผมตกหล่นตรงไหน :wanwan012:
code ท่านแบบเต็ม css
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul#navi_containTab > li").click(function (event) {
var menuIndex = $(this).index();
$("ul#detail_containTab > li:visible").hide();
$("ul#detail_containTab > li").eq(menuIndex).show();
});
var anchorTag = getAnchorTag();
var tabIndex = -1;
switch (anchorTag) {
case "tab1":
tabIndex = 0;
break;
case "tab2":
tabIndex = 1;
break;
case "tab3":
tabIndex = 2;
break;
case "tab4":
tabIndex = 3;
break;
case "tab5":
tabIndex = 4;
break;
}
if (tabIndex > -1) {
$("ul#detail_containTab > li:visible").hide();
$("ul#detail_containTab > li").eq(tabIndex).show();
}
});
function getAnchorTag() {
var anchorTag = window.location.href.slice(window.location.href.indexOf('#') 1)
return anchorTag;
}
</script>
<style type="text/css">
body{
margin:0;
padding:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
div#i_containTab{
position:relative;
display:block;
width:500px; /* กำหนดความกว้างทั้งหมด */
border:1px solid #CCC;
}
ul#navi_containTab{
list-style:none;
padding:0;
margin:0;
width:100%;
background-color:#FCF;
}
ul#navi_containTab li{
display:block;
float:left;
height:30px;
width:100px; /* กำหนดความกว้างทั้งหมด หารด้วยจำนวนเมนูแท็บ */
border:0px solid #CCC;
line-height:25px;
cursor:pointer;
text-align:center;
}
/* class รูปแบบของแต่ละเมนู */
.tabNavi1{
background-color:#9C3;
}
.tabNavi2{
background-color:#C93;
}
.tabNavi3{
background-color:#FC9;
}
.tabNavi4{
background-color:#C9F;
}
.tabNavi5{
background-color:#F93;
}
ul#detail_containTab{
list-style:none;
padding:0;
margin:0;
width:100%;
}
ul#detail_containTab li{
float:left;
width:100%;
height:150px;
}
/* class รูปแบบของแต่ละเนื้อหา */
.detailContent1{
background-color:#9C3;
display:block;
}
.detailContent2{
background-color:#C93;
display:none;
}
.detailContent3{
background-color:#FC9;
display:none;
}
.detailContent4{
background-color:#C9F;
display:none;
}
.detailContent5{
background-color:#F93;
display:none;
}
</style>
</head>
<body>
<div id="i_containTab">
<ul id="navi_containTab">
<li class="tabNavi1">Tab Menu 1</li>
<li class="tabNavi2">Tab Menu 2</li>
<li class="tabNavi3">Tab Menu 3</li>
<li class="tabNavi4">Tab Menu 4</li>
<li class="tabNavi5">Tab Menu 5</li>
</ul>
<ul id="detail_containTab">
<li class="detailContent1">Detail Data1</li>
<li class="detailContent2">Detail Data2</li>
<li class="detailContent3">Detail Data3</li>
<li class="detailContent4">Detail Data4</li>
<li class="detailContent5">Detail Data5</li>
</ul>
</div>
</body>
</html>
code ต้นฉบับผมเอามาจาก web นี้
http://www.ninenik.com/สร้างเมนูแท็บ_Tab_menu_ด้วย_jQuery_ _CSS_อย่างง่าย-155.html
อ้างถึงจาก: max30012540 ใน 01 มีนาคม 2013, 00:05:36
ที่ท่านต้องการ คือ แบบนี้หรือเปล่าครับ
http://jqueryui.com/tabs/
code อันเดิมมันก็ใช้ได้ดีครับ แต่ปัญหาคือถ้าผมเรียกจากหน้าอื่นเช่นจากหน้า index แล้วให้แสดง tab ที่ 2 หรือ tab อื่นที่ไม่ใช่ tab1 มันจะไม่แสดงผล tab นั้นๆ
จะอยู่ที่ tab1 ตลอด เพราะตัว style="display ของ tab1 เป็น block; ส่วน tab อื่นๆค่า display มันเป็น none; ครับ มันพอมีคำสั่งอะไรไปเปลี่ยน style ได้ป่าวครับ
เช่นถ้าเรียก tab2 ก็ให้เปลี่ยน style tab2 เป็น style="display: block;" แล้วก็เปลี่ยน tab1 เป็น style="display: none;"
ลองตัวที่ท่านแนะนำ มันก็โอครับ เรียกจากหน้า index ไป tabs-2 ได้เลย
<a href="http://jqueryui.com/tabs#tabs-2">Goto tab2</a>
ตอนนี้เลยเปลี่ยนมาใช้ tabs ที่ท่านแนะนำมาใช้ไปก่อน เพียงแต่ยังคาใจอันเก่า กำลังศึกษา jquery เพิ่มเติม
ขอบคุณทั้งสองท่านครับ +ให้ท่าน max30012540 ด้วย