2011-11-22 83 views
0

我正在使用以下代碼在jquery中創建一個選項卡,並且當有人單擊它時打開該特定選項卡。所以可以修改它,以便它可以按指定的時間間隔旋轉製表符。jquery選項卡自動滑動

// Tabs 
    // When page loads... 
    $(".tab-content").hide(); //Hide all content 
    $("ul.sidebar-tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab-content:first").show(); //Show first tab content 

    // On Click Event 
    $("ul.sidebar-tabs li").click(function() { 

     $("ul.sidebar-tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab-content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 

爲同一的HTML代碼,

<ul class="sidebar-tabs"> 
    <li><a href="#tab-1">Tab1</a></li> 
    <li><a href="#tab-2">Tab2</a></li> 
</ul><!-- //sidebar-tabs --> 
<div class="tab-container"> 
    <div id="tab-1" class="tab-content"> 
    <div> 
    <div id="tab-2" class="tab-content"> 
    <div> 
</div> 

回答

0

,如果你想修改現有的嘗試,你可能會開始使用http://www.smartnetzone.com/blog_demos/auto_rotating_tabs/

http://flowplayer.org/tools/tabs/index.html

而另一個例子你可以這樣做:

jQuery("#tabs").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000); 
+0

是否可以修改上面的代碼? – Ajay

+0

我已更新我的答案,並檢查並回復它是否有效! – coder

+0

沒有。它不起作用。我還添加了html代碼... – Ajay