jquery与相同的脚本冲突

我正在使用jquery将内容加载到选项卡中，并在单击时切换选项卡。 我的问题是，我正在使用这个“标签切换器”两次，这引起了冲突。 我对jquery不太熟悉，所以我的问题可能在于我在头部创建了两次函数。 这是我的jquery（你会注意到有重复的脚本，选择器改变了一点，所以“选项卡切换器”看起来不同。

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

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

你可以在这里看到这个： 链接你会注意到第二个脚本工作正常（在底部：margie和todd。并且第一个脚本不起作用（在侧栏：类别和档案。）

知道如何解决这个问题吗？

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