รบกวนช่วยเขียน 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;">
รบกวนด้วยครับ
แสดงกระทู้
