與相同的腳本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