与相同的脚本jQuery的冲突

Question

我正在使用jquery将内容加载到标签，并点击切换标签。我的问题是，我使用这个“标签切换器”两次，其中一个页面，这是导致冲突。我对jQuery不太熟悉，所以我的问题可能在于我在头部创建了两次函数。这里是我的jQuery（你会发现有重复的脚本，与选择改变了一点，因此“选项卡切换”出现不同。

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

我的CSS是正确的，我知道问题出在上面。第二个脚本工作正常，第一个脚本没有。

你可以在这里看到这里：link你会注意到第二个脚本可以正常工作（在底部：margie和todd，而第一个脚本没有' t工作（在边栏中：类别和档案）。

任何想法如何解决这个问题？

Answer 1

我知道这个脚本 - 我实际上是将它重构为另一个问题。代码非常糟糕，因为它包含许多不好的做法。让我们来看看这里可以做些什么：

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

那里 - 所有选项卡都有一个脚本。将所有标签容器重命名为tabs。这使用了一些非常重的链接，这实际上效率不高，但是考虑到这里的DOM，没有太多的事情要做。使用这个，所以你不需要两个脚本来做基本相同的事情。

看到它在这里工作：http://jsfiddle.net/E3SFt/2/。为此，我复制了HTML字符作为字符，并对上面提到的类名称进行了小修改。另外请注意，您在那里有一些无效的HTML - div中的li元素无效。

编辑：愚蠢的错误，this.hasClass应current.hasClass