Changer les onglets Javascript avec un bouton?

Question

Je travaille sur un site web qui met en place des onglets via javascript, et je voudrais créer un bouton qui va à l'onglet 'suivant'. Je ne me soucie pas si je dois coder en dur dans les identifiants de tabulation dans le javascript ou quoi, mais indépendamment je voudrais pouvoir avancer les onglets.

EDIT3: Voici une implémentation jfiddle de ce que j'ai. Je veux juste que le bouton suivant soit capable de faire avancer les onglets de la même manière que de cliquer dessus. Merci!

http://jsfiddle.net/Cd5qb/

Voici le code que j'ai pour les onglets de travail actuels, sans bouton:

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li"); 

tabs.first().addClass("active").show(); 
tabContents.first().show(); 

tabs.click(function() { 
    var $this = $(this), 
     activeTab = $this.find('a').attr('href'); 
    if(!$this.hasClass('active')){ 
     $this.addClass('active').siblings().removeClass('active'); 
     tabContents.hide().filter(activeTab).fadeIn(); 
    } 
    return false; 
}); 

Je suis en train de mettre en œuvre quelque chose de similaire à la tabs.click pour un bouton, et voici ce que j'ai jusqu'ici:

var tabbtn = $(".tabbutton"); 
tabbtn.click(function() { 
    var listItem = document.getElementById('tab2'); 
    var $this = $(this), 
     activeTab = $this.find('a').attr('href'); 
    tabContents.hide().filter("#tab2").fadeIn(); 

    return false; 
}); 

Cela affichera réellement les informations de l'onglet droit, mais il ne changera pas la tête de l'onglet er est surligné.

Vous avez des idées? Merci d'avance pour l'aide!

Answer 1

Que diriez-vous:

$(".tabbutton").click(function(){ 
    var nextTab = parseInt($("li.active").attr("id"), 10) + 1; 
    if(nextTab === 4){ nextTab = 1; } 
    $("#"+nextTab).click(); 
}); 

et l'ajout d'un identifiant équivalent numérique aux éléments li?

violon de travail est ici: http://jsfiddle.net/gugahoi/Cd5qb/1/

MISE À JOUR:

Ok, here is the new fiddle avec seulement le bouton changer les onglets.

Ceci est d'autant js:

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li"); 

tabs.first().addClass("active").show(); 
tabContents.first().show(); 

$(".tabbutton").click(function(){ 
    var nextTab = parseInt($("li.active").attr("id"), 10) + 1; 
    if(nextTab === 4){ nextTab = 1; } 
    tabs.removeClass("active"); 
    $("#"+nextTab).addClass("active"); 
    tabContents.hide(); 
    $("#tab"+nextTab).fadeIn("slow"); 
}); 

Et c'est la seule mise à jour nécessaire dans le code HTML:

<ul class="tabs clearfix"> 
    <li id="1"><a href="#">Tab1</a></li> 
    <li id="2"><a href="#">Tab2</a></li> 
    <li id="3"><a href="#">Tab3</a></li> 
</ul> 

Answer 2

@ Gustavo Hoirisch: Avec votre code précédent Moi aussi je ne retiré 'actif' de 'tabContents' et était sur le point de poster. Anywayz travail grt.