ต่อไป »

[l3adtzl3oy]

รบกวนช่วยเขียน 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;">

รบกวนด้วยครับ  

[pkr4life]

ลองมั่วดู

โค๊ด:

<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>

[l3adtzl3oy]

ลองมั่วดู

โค๊ด:

<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 ที่เคยใช้ได้ก็ใช้ไม่ได้ คลิกแล้วไม่ไปไหนเลยครับ 
แต่  1 ให้ในน้ำใจที่มาช่วยตอบครับ 

[pkr4life]

ผมลองแล้ว ได้อยู่นะคับ

ลองดูแบบเต็มๆ

โค๊ด:

    <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>

[max30012540]

ที่ท่านต้องการ คือ แบบนี้หรือเปล่าครับ

โค๊ด:

http://jqueryui.com/tabs/

[l3adtzl3oy]

ผมลองแล้ว ได้อยู่นะคับ

ลองดูแบบเต็มๆ

โค๊ด:

    <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 ส่วนที่ท่านเพิ่มก็ทำงานปกติครับ หรือว่าผมตกหล่นตรงไหน 

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

[l3adtzl3oy]

ที่ท่านต้องการ คือ แบบนี้หรือเปล่าครับ

โค๊ด:

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 ด้วย