2011-11-22 2 views
0

J'utilise le code suivant pour créer un onglet dans jquery et lorsqu'un utilisateur clique dessus, il ouvre cet onglet particulier. Il est donc possible de le modifier de telle sorte qu'il puisse faire pivoter les onglets à l'intervalle spécifié.Diapositive automatique de l'onglet 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; 
    }); 

Le code html pour le même est,

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

Répondre

0

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

Et un autre exemple, vous pourriez commencer avec http://www.smartnetzone.com/blog_demos/auto_rotating_tabs/

Comme Si vous souhaitez modifier l'existant celui que vous pouvez faire de cette façon:

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

Est-il possible de modifier le code ci-dessus? – Ajay

+0

J'ai mis à jour ma réponse et vérifier et répondre si cela fonctionne! – coder

+0

no. ça ne marche pas. J'ai aussi ajouté le code html ... – Ajay