สอบถามเกี่ยวกับ Tab Menu

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเกี่ยวกับ Tab Menu

สอบถามเกี่ยวกับ Tab Menu

ต่อยอดจากบทความ
http://www.ninenik.com/สร้างเมนูแท็บ_Tab_menu_ด้วย_jQuery_ _CSS_อย่างง่าย-155.html

คือผมอยากให้มันสไลด์ auto เหมือนของแท็บเว็บ sanook.com

Narupot 110.168.73.xxx 01-09-2014 14:44:34

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Facebook

ความคิดเห็นที่ 1

ลองใช้ plugin เกี่ยวกับสไลด้ดูนะครับ

ตัวอย่าง http://bxslider.com/

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

      <title>เทส สไลด์</title>
      <!-- bxSlider Javascript file -->
      <script src="jquery.bxslider/jquery.bxslider.min.js"></script>
      <!-- bxSlider CSS file -->
      <link href="jquery.bxslider//jquery.bxslider.css" rel="stylesheet" />

      <script type="text/javascript">  

      $(document).ready(function(){  
        $('.bxslider').bxSlider({
          pagerCustom: '#bx-pager',
          auto: true,
        });


      });
      </script> 
      <style type="text/css">  
      section {
        height: 200px;
      }

      </style>     
    </head>
    <body>
      <div id="bx-pager">
      <a data-slide-index="0" title="ข่าวร้อนวันนี้" href="#tab-news">ข่าววันนี้</a>
      <a data-slide-index="1" title="ข่าวบันเทิง-ดารา" href="#tab-entertainment">บันเทิง-ดารา</a>
      <a data-slide-index="2" title="วาไรตี้" href="#tab-variety">วาไรตี้</a>
      <a data-slide-index="3" title="เกมส์-ไอที-รถ" href="#tab-game">เกมส์-ไอที-รถ</a>
      <a data-slide-index="4" title="กีฬา-ฟุตบอล" href="#tab-sport">กีฬา-ฟุตบอล</a>
      <a data-slide-index="5" title="ไลฟ์สไตล์" href="#tab-lifestyle">ไลฟ์สไตล์</a>
    </div>
      <ul class="bxslider">
        <li>
          <section>
            <h2>ข่าวร้อนวันนี้</h2>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
            ข่าวร้อนวันนี้ <br>
          </section>
        </li>
        <li>
          <section>
            <h2>ข่าวบันเทิง-ดารา</h2>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>
            ข่าวบันเทิง-ดารา <br>

          </section>
        </li>
        <li>
          <section>
            <h2>วาไรตี้</h2>
            วาไรตี้ <br>
            วาไรตี้ <br>
            วาไรตี้ <br>
            วาไรตี้ <br>
            วาไรตี้ <br>
            วาไรตี้ <br>
          </section>
        </li>
        <li>
          <section>
           <h2>เกมส์-ไอที-รถ</h2>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
           เกมส์-ไอที-รถ <br>
         </section>
       </li>
       <li>
        <section>
          <h2>กีฬา-ฟุตบอล</h2>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
          กีฬา-ฟุตบอล <br>
        </section>
      </li>
      <li>
        <section>
          <h2>ไลฟ์สไตล์</h2>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
          ไลฟ์สไตล์ <br>
        </section>
      </li>
    </ul>

  </body>
  </html>

wowowow 61.90.9.xxx 01-09-2014 16:57

ความคิดเห็นที่ 2

ขอบคุณมากครัชพี่ เดียวจะลองเอาไปประยุกต์ดูครัช

narupot 171.99.141.xxx 01-09-2014 18:38

ความคิดเห็นที่ 3

อยากได้แบบประยุกต์ในกระทูอ่ะครับ
ถ้าผมเขียนใหม่คงนานเลย
อยากประยุกต์ใส่ใน Tab เลย
เพราะผมเขีนยเสร็จหมดแล้ว
เหลือแต่ให้มันสไลด์ auto;

narupot 58.11.134.xxx 02-09-2014 11:43

ความคิดเห็นที่ 4

เปลี่ยน script นิดหน่อยก็ใช้ได้

$(function () {
    
    var interValID=null;
    var menuIndex=0;
    var indexLength=$("ul#navi_containTab > li").length;
      $("ul#navi_containTab > li").click(function(event){  
            menuIndex=$(this).index();  
            $("ul#detail_containTab > li:visible").hide();             
            $("ul#detail_containTab > li").eq(menuIndex).show();  
            clearInterval(interValID);
            swapTab();
    });    

    var swapTab = function (){
        interValID=setInterval(function(){
            if(menuIndex+1>=indexLength){
                menuIndex=0;
            }else{
                menuIndex++;
            }
            $("ul#detail_containTab > li:visible").hide();             
            $("ul#detail_containTab > li").eq(menuIndex).show();          
        },3000); // เปลี่ยนทุกๆ 3 วินาที    
    };    
    swapTab();
    
});

ตัวอย่าง

Tab Menu 1
Tab Menu 2
Tab Menu 3
Tab Menu 4
Tab Menu 5

Detail Data1
Detail Data2
Detail Data3
Detail Data4
Detail Data5

ninenik 1.46.17.xxx 03-09-2014

ความคิดเห็นที่ 5

โห ขอบคุณมากเลยครับพี่

narupot 171.101.25.xxx 04-09-2014 02:08

ความคิดเห็นที่ 6

ขอบความรู้เพิ่มเติมครับพี่
แล้วอยากเพิ่ม ให้มัน fred ทั้งแบบคลิกและแบบ auto ล่ะครับ
สุดท้ายจิงๆครับ...

narupot 171.101.25.xxx 04-09-2014 02:13

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน