ขอต่อยอดความรุ้หน่อยครับ {รบกวนพี่นิกสอนหน่อยนะครับ}

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขอต่อยอดความรุ้หน่อยครับ {รบกวนพี่นิกสอนหน่อยนะครับ}

ขอต่อยอดความรุ้หน่อยครับ {รบกวนพี่นิกสอนหน่อยนะครับ}
จากลิงค์ การสร้าง Tab เรายากให้มัน Slide Auto + fade อัตโนมัติ เราต้องเพิ่มอะไรเข้าไปครับ*-*
http://www.ninenik.com/สร้างเมนูแท็บ_Tab_menu_ด้วย_jQuery_ _CSS_อย่างง่าย-155.html


Narupot 124.121.8.xxx 03-12-2015 00:22:29

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ไว้เป็นแนวทาง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>   
</head>
<body>
    
<style type="text/css">  
body{  
    font: Tahoma, Thonburi;   
    font-size:12px;  
}  
div#i_containTab{  
    position:relative;  
    display:block;  
    width:540px; /* กำหนดความกว้างทั้งหมด   */  
    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>      
<div class="container">

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

<script type="text/javascript">    
var swapbanner;
var timeSwap=null;
$(function(){    

    var menuIndex = 0;
    var totalIndex = $("ul#navi_containTab > li").length;
    $("ul#navi_containTab > li").click(function(event){  
            clearInterval(timeSwap);
            menuIndex=$(this).index();  
            $("ul#detail_containTab > li:visible").hide();             
            $("ul#detail_containTab > li").eq(menuIndex).fadeIn(1000);  
            timeSwap = setInterval(function(){
                swapbanner();
            },3000);
    });  
    
    swapbanner = function(){
        menuIndex++;
        if(menuIndex==totalIndex){
            menuIndex=0;
        }
        $("ul#detail_containTab > li:visible").hide();             
        $("ul#detail_containTab > li").eq(menuIndex).fadeIn(1000);          
    }
    timeSwap = setInterval(function(){
        swapbanner();
    },3000);
    
});    
</script>    
</body>
</html>


ตัวอย่าง

  • Detail Data1
  • Detail Data2
  • Detail Data3
  • Detail Data4
  • Detail Data5


ninenik 180.183.46.xxx 03-12-2015
 ความคิดเห็นที่ 2
ขอบคุณมากครับ


narupot 202.176.172.xxx 03-12-2015 17:19
 ความคิดเห็นที่ 3
ติดปัญหาซะแล้ว มันคลิกแท็บอื่นไม่ได้อ่ะค๊าบ
ไม่รู้ว่าผิดตรงไหนหรือป่าว
<section id="tabslide">
            <nav id="Tab_menu_Navigation">
                <ul id="Tab_content_menuNavigation">
                    <li class="Tab_content_menuNavigation1">ข่าววันนี้</li>
                    <li class="Tab_content_menuNavigation2">บันเทิง-ดารา</li>
                    <li class="Tab_content_menuNavigation3">วาไรตี้</li>
                    <li class="Tab_content_menuNavigation4">เกมส์-ไอที</li>
                    <li class="Tab_content_menuNavigation5">กีฬา-ฟุตบอล</li>
                    <li class="Tab_content_menuNavigation6">ไลฟ์สไตล์</li>
                </ul>
                <ul id="Tab_detail_menuNavigation">
                    <li class="Tab_detail-menuNavigation1">
                        <artile class="detail-menuNav">
                            <header class="detail-menuNav_headhotnews">
                                <img class="detail-menuNav_hotnews-big" src="img/hotnews.jpg"/>
                                <h1 class="detail-menuNav_hotnewstitle">ศาลวินิจฉัยยิ่งลักษณ์ พ้นนายกรัฐมนตรี</h1>
                            </header>
                            <section class="detail-menuNav_box-tab-news">
                                <figure class="detail-menuNav_box-tab-newssmall">
                                    <img class="detail-menuNav_box-tab-newssmall-img1" src="img/hotnews.jpg"/>
                                    <p>ssfgsdfgsdfgsdfgsdfgfdgsdfg</p>
                                </figure>
                                <figure class="detail-menuNav_box-tab-newssmall">
                                    <img class="detail-menuNav_box-tab-newssmall-img2" src="img/hotnews.jpg"/>
                                    <p>ssfgsdfgsdfgsdfgsdfgfdgsdfg</p>
                                </figure>
                            </section>
                            <section class="detail-menuNav_list-small-tab-right">
                                <article><img class="detail-menuNav_list-small-tab-right" src="img/hotnews.jpg"/><p>s;dfgsdfgs;'ldfkg</p></article>
                                <article>sdfgsdfgsdfgsdf</article>
                                <article>gsdfgsdfgsd</article>
                                <article>fgsdfgsdfgsdfgsdfg</article>
                                <article>sdfgsdfgsdfg</article>
                                <article>fgsdfgsdfgsdfgsdfg</article>
                                <article>sdfgsdfgsdfg</article>

                            </section><div class="clear"></div>
                            <section class="detail-menuNav_box-tab-bottom">
                                <figure class="detail-menuNav-box-list"><img class="detail-menuNav-list-bottom" src="img/hotnews.jpg"/></figure>
                                <figure class="detail-menuNav-box-list"><img class="detail-menuNav-list-bottom" src="img/hotnews.jpg"/></figure>
                                <figure class="detail-menuNav-box-list"><img class="detail-menuNav-list-bottom" src="img/hotnews.jpg"/></figure>
                                <figure class="detail-menuNav-box-list"><img class="detail-menuNav-list-bottom" src="img/hotnews.jpg"/></figure><div class="clear"></div>
                                <figure class="detail-menuNav-box-list"><img class="detail-menuNav-list-bottom" src="img/hotnews.jpg"/></figure>
                                <figure class="detail-menuNav-box-list"><img class="detail-menuNav-list-bottom" src="img/hotnews.jpg"/></figure>
                                <figure class="detail-menuNav-box-list"><img class="detail-menuNav-list-bottom" src="img/hotnews.jpg"/></figure>
                                <figure class="detail-menuNav-box-list"><img class="detail-menuNav-list-bottom" src="img/hotnews.jpg"/></figure>

                            </section>
                            <section class="detail-menuNav-ads-hotnews">

                            </section>


                        </artile>
                    </li>
                    <li class="Tab_detail_menuNavigation2">
                        <header class="detail-menuNav_entertainment">
                            <img class="detail-menuNav_ententainment-bigimg" src="img/dara.jpg"/>
                            <figure class="detail_menuTab_entertainment-boxlist"><img class="detail_menuTab_entertainment-list" src="img/dara.jpg"/></figure>
                            <figure class="detail_menuTab_entertainment-boxlist"><img class="detail_menuTab_entertainment-list" src="img/dara.jpg"/></figure>
                            <figure class="detail_menuTab_entertainment-boxlist"><img class="detail_menuTab_entertainment-list" src="img/dara.jpg"/></figure>
                            <figure class="detail_menuTab_entertainment-boxlist"><img class="detail_menuTab_entertainment-list" src="img/dara.jpg"/></figure>
                        </header>
                        <section class="detail-menuTab_entertainment-centerlist">
                            <figure class="detail-menuTab_entertainment-centerlist-box"><img class="detail-menuTab_entertainment-centerlist-img" src="img/dara.jpg"/></figure>
                            <figure class="detail-menuTab_entertainment-centerlist-box"><img class="detail-menuTab_entertainment-centerlist-img" src="img/dara.jpg"/></figure>
                            <figure class="detail-menuTab_entertainment-centerlist-box"><img class="detail-menuTab_entertainment-centerlist-img" src="img/dara.jpg"/></figure>
                            <figure class="detail-menuTab_entertainment-centerlist-box"><img class="detail-menuTab_entertainment-centerlist-img" src="img/dara.jpg"/></figure>
                            <figure class="detail-menuTab_entertainment-centerlist-box"><img class="detail-menuTab_entertainment-centerlist-img" src="img/dara.jpg"/></figure>
                            <figure class="detail-menuTab_entertainment-centerlist-box"><img class="detail-menuTab_entertainment-centerlist-img" src="img/dara.jpg"/></figure>
                        </section>
                        <section class="detail-menuTab_entertainment-right">
                            <figure class="detail-menuTab_entertainment-right-box"><img class="detail-menuTab_entertainment-right-img" src="img/dara.jpg"/></figure>
                            <article>fgsfdgsdfgsdfgsdfgsdfgdsfgsdfg</article>
                            <article>fgsfdgsdfgsdfgsdfgsdfgdsfgsdfg</article>
                            <article>fgsfdgsdfgsdfgsdfgsdfgdsfgsdfg</article>
                            <article>fgsfdgsdfgsdfgsdfgsdfgdsfgsdfg</article>
                        </section>
                    </li>
                    <li class="Tab_detail_menuNavigation3">
                        <header class="detail-menuTab_variety-highlight">
                            <figure class="detail-menuTab_variety-highlight-box"><img class="detail-menuTab-variety-highlight-img" src="img/variety.jpg"/></figure>
                            <figure class="detail-menuTab_variety-highlight-box"><img class="detail-menuTab-variety-highlight-img" src="img/variety.jpg"/></figure>

                        </header>
                        <section class="detail-menuTab_variety-list">
                            <figure class="detail-menuTab_variety-listbox"><img class="detail-menuTab_variety-listimg" src="img/variety.jpg"/></figure>
                            <figure class="detail-menuTab_variety-listbox"><img class="detail-menuTab_variety-listimg" src="img/variety.jpg"/></figure>
                            <figure class="detail-menuTab_variety-listbox"><img class="detail-menuTab_variety-listimg" src="img/variety.jpg"/></figure>
                            <figure class="detail-menuTab_variety-listbox"><img class="detail-menuTab_variety-listimg" src="img/variety.jpg"/></figure>
                        </section>
                        <section class="detail-menuTab_variety-right">
                            <article>หัวเรื่อง</article>
                            <figure class="detail-menuTab_variety-right-box"><img class="detail-menuTab_variety-right-img" src="img/variety.jpg"/></figure>
                            <figure class="detail-menuTab_variety-right-box"><img class="detail-menuTab_variety-right-img" src="img/variety.jpg"/></figure>

                        </section>
                        <section class="detail-menuTab_variety-bottom">
                            <article>รถยนต์</article>
                            <header class="detail-menuTab_variety-highlight-bottom">
                                <img class="detail-menuTab_variety-highlight-bottom-img" src="img/variety.jpg"/>
                            </header>
                            <figure class="detail-menuTab_variety-highlight-list-box"><img class="detail-menuTab-variety-highlight-list-img" src="img/variety.jpg"/></figure>
                            <figure class="detail-menuTab_variety-highlight-list-box"><img class="detail-menuTab-variety-highlight-list-img" src="img/variety.jpg"/></figure>
                            <figure class="detail-menuTab_variety-highlight-list-box"><img class="detail-menuTab-variety-highlight-list-img" src="img/variety.jpg"/></figure>
                            <figure class="detail-menuTab_variety-highlight-list-box"><img class="detail-menuTab-variety-highlight-list-img" src="img/variety.jpg"/></figure>

                        </section>
                        <section class="detail-menuTab_variety-horoscope">
                            <article>ดูดวงออนไลน์</article>

                        </section>

                    </li>
                    <li class="Tab_detail_menuNavigation4">
                        <header class="detail-menuTab_it-game-highlight">
                            <figure class="detail-menuTab_it-game-highlight-box"><img class="detail-menuTab_it-game-highlight-img" src="img/itnews.jpg"/></figure>
                            <div class="clear"></div>
                            <figure class="detail-menuTab_it-game-highlight-listbox"><img class="detail-mentTab_it-game-highlight-listbox-img" src="img/itnews.jpg"/></figure>
                            <figure class="detail-menuTab_it-game-highlight-listbox"><img class="detail-mentTab_it-game-highlight-listbox-img" src="img/itnews.jpg"/></figure>
                            <figure class="detail-menuTab_it-game-highlight-listbox"><img class="detail-mentTab_it-game-highlight-listbox-img" src="img/itnews.jpg"/></figure>
                            <figure class="detail-menuTab_it-game-highlight-listbox"><img class="detail-mentTab_it-game-highlight-listbox-img" src="img/itnews.jpg"/></figure>
                        </header>
                        <article>

                        </article>


                    </li>
                    <li class="Tab_detail_menuNavigation5">
                        <section class="detail-menuTab_sport-highlight">
                            <figure class="detail-menuTab_sport-highlight-box"><img class="detail-menuTab_sport-highlight-box-img" src="img/sport.jpg"/></figure>
                            <figure class="detail-menuTab_sport-listbox"><img class="detail-menuTab_sport-listbox-img" src="img/football.jpg"/></figure>
                            <figure class="detail-menuTab_sport-listbox"><img class="detail-menuTab_sport-listbox-img" src="img/football.jpg"/></figure>
                            <figure class="detail-menuTab_sport-listbox"><img class="detail-menuTab_sport-listbox-img" src="img/football.jpg"/></figure>
                            <figure class="detail-menuTab_sport-listbox"><img class="detail-menuTab_sport-listbox-img" src="img/football.jpg"/></figure>
                            <figure class="detail-menuTab_sport-listbox"><img class="detail-menuTab_sport-listbox-img" src="img/football.jpg"/></figure>
                            <figure class="detail-menuTab_sport-listbox"><img class="detail-menuTab_sport-listbox-img" src="img/football.jpg"/></figure>
                            <figure class="detail-menuTab_sport-listbox"><img class="detail-menuTab_sport-listbox-img" src="img/football.jpg"/></figure>
                            <figure class="detail-menuTab_sport-listbox"><img class="detail-menuTab_sport-listbox-img" src="img/football.jpg"/></figure>

                        </section>
                        <aside class="detail-menuTab_sport-aside">
                            <article class="detail-menuTab_sport-aside-ads"></article><div class="clear"></div>
                            <article>
                                <header>โปรแกรมฟุตบอล</header>
                            </article>

                        </aside>
                    </li>

                </ul>
            </nav>
            <script type="text/javascript">
                var swapbanner;
                var timeSwap=null;
                $(function(){

                    var menuIndex = 0;
                    var totalIndex = $("ul#Tab_content_menuNavigation > li").length;
                    $("ul#Tab_content_menuNavigation > li").click(function(event){
                        clearInterval(timeSwap);
                        menuIndex=$(this).index();
                        $("ul#Tab_detail_menuNavigation > li:visible").hide();
                        $("ul#Tab_detail_menuNavigation > li").eq(menuIndex).fadeIn(1000);
                        timeSwap = setInterval(function(){
                            swapbanner();
                        },3000);
                    });

                    swapbanner = function(){
                        menuIndex++;
                        if(menuIndex==totalIndex){
                            menuIndex=0;
                        }
                        $("ul#Tab_detail_menuNavigation > li:visible").hide();
                        $("ul#Tab_detail_menuNavigation > li").eq(menuIndex).fadeIn(1000);
                    }
                    timeSwap = setInterval(function(){
                        swapbanner();
                    },3000);

                });
            </script>

        </section>


narupot 124.121.8.xxx 19-12-2015 23:31
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ