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。而且第一个脚本不起作用）（在侧边栏中：类别和档案。）

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

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中存在一些无效的HTML - li内的div个元素无效。

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

jquery与相同的脚本冲突

1 个答案: