Utilisation de plusieurs blocs de tabulation sur la même page (jQuery)

Question

$('.tabbed-block .tab-content:first').show(); 
      $('.tabbed-block ol li:first').addClass('active'); 
      $('.tabbed-block ol li a').click(function() { 
       $('.tabbed-block ol li').removeClass('active'); 
       $(this).parent().addClass('active'); 
       var a = $(this).attr('href'); 
       $('.tabbed-block .tab-content').hide(); 
       $(a).show(); 
       return false; 
      }); 

.. fonctionne très bien, mais pas s'il est utilisé plusieurs fois de la même page, interfère les uns avec les autres. Que devrais-je changer?

Merci!

Answer 1

Cela devrait fonctionner. Bien, pourquoi n'utilisez-vous pas simplement les onglets de l'interface utilisateur jQuery? ..

$('.tabbed-block').each(function(){ 
    var $block = $(this); 
    $block.find('.tab-content:first').show(); 
    $block.find('ol li:first').addClass('active'); 
    $block.find('ol li a').click(function() { 
    var $link = $(this); 
    $link.closest('ol').find('li a').removeClass('active'); 
    $link.parent().addClass('active'); 
    var a = $link.attr('href'); 
    $link.closest('.tabbed-block').find('.tab-content').hide(); 
    $(a).show(); 
    return false; 
    }); 
});