conflit jquery avec des scripts identiques

Question

J'utilise jquery pour charger le contenu dans des onglets, et passer les onglets sur le clic. Mon problème est que sur une page, j'utilise deux fois ce "sélecteur d'onglets" et cela provoque un conflit. Je ne suis pas trop expérimenté avec jquery, donc mon problème réside probablement dans le fait que je crée la fonction deux fois dans la tête. Voici mon jquery (vous remarquerez qu'il ya des scripts en double, avec les sélecteurs ont changé un peu pour l'onglet « switchers » apparaissent différents.

<script type="text/javascript"> 
    $(document).ready(function() { 

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

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

      $("ul.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; 
     }); 

    }); 
    </script> 

    <script type="text/javascript"> 
    $(document).ready(function() { 

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

     //On Click Event 
     $("ul.tab li").click(function() { 

      $("ul.tab li").removeClass("active"); //Remove any "active" class 
      $(this).addClass("active"); //Add "active" class to selected tab 
      $(".tabs_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; 
     }); 

    }); 
    </script> 

Mon css est tout bon, je sais que le problème est au-dessus. Le deuxième script fonctionne bien, et le premier script ne fonctionne pas

Vous pouvez voir ce live ici: link Vous remarquerez que le second script fonctionne bien (en bas: margie et todd.) Et le premier script doesn ' t travail (dans la colonne: catégories et archives.)

Answer 1

Je connais ce script - je l'ai effectivement refactorisé pour une autre question. Le code est assez mauvais, dans le sens où il contient beaucoup de mauvaises pratiques. Voyons voir ce qui peut être fait ici:

$(".tabs_content").not(':first-child').hide(); 
var tabs = $('.tabs li'); 

tabs.filter(':first-child').addClass('active'); 

tabs.click(function() { 
    var current = $(this); 

    if(!current.hasClass('active')){ 
     current.addClass('active').siblings().removeClass('active'); 
     var activeTab = current.find("a").attr("href"); 
     current.parent().next().children().hide().filter(activeTab).fadeIn(); 
    } 

    return false; 
}); 

Il ya un seul script pour tous vos onglets. Renommez tous vos conteneurs d'onglets en tabs. Cela utilise un enchainement assez lourd, ce qui n'est pas très efficace, mais étant donné le DOM, il n'y a pas grand chose à faire. Utilisez ceci pour ne pas avoir besoin de deux scripts qui font essentiellement la même chose.

Voir le fonctionnement ici: http://jsfiddle.net/E3SFt/2/. J'ai copié votre caractère HTML pour le caractère pour cela, avec la modification mineure aux noms de classe comme indiqué ci-dessus. Notez également que vous avez du code HTML non valide - les éléments li à l'intérieur de div s ne sont pas valides.

Edit: erreur stupide, this.hasClass devrait être current.hasClass