Question

我正在运行Wordpress主题（Slate），它附带了实现由jquery.tabs.min.js提供支持的标签的短代码。

使用他们的短代码我尝试嵌套选项卡，它不起作用，很可能是因为他们设计了短代码，所以我创建了一些简单的jQuery和额外的HTML来制作嵌套选项卡区域，然后包含原始主题的jquery标签短码。

一切正常，但有一个问题令我感到困惑：加载子标签时包含的标签少于之前的父标签子标签，那么子标签就会溢出，jQuery会得到来自上一组的子选项卡，将它们附加到当前选项卡。

一个工作示例是here。请注意，“锻炼”区域中的“冬季运动活动”子选项卡也会加载到夜生活区域，而“游览”父级选项卡中的“博物馆”和“旅游景点”也会加载到“日历”父级选项卡中，该选项卡应仅包含1个子选项卡（蒙特利尔活动））。

所以我发生了一些奇怪的漏油事件用于控制父标签的初学者jQuery代码如下所示。

$(function(){
    var subcat = $('.sub-categories'),
        subdivfirst = $('.sub-categories div:first'),
        subdiv = $('.sub-categories div'),
        cattitlefirst = $('.categories ul li:first'),
        cattitle = $('.categories ul li');

        subcat.children('div').hide();  
        subdivfirst.show();     
        cattitlefirst.addClass('active');


        $('.categories li a').click(function(){
            var $this = $(this);

            cattitle.removeClass('active');
            subcat.children('div').hide();

            $this.parent('li').addClass('active');

            var catLink = $this.attr('id');
            var showcat = $('div #sub-' + catLink);

            showcat
                .fadeIn(600)    
                .find('.panes').show()
        });
});

然后这些“.subcategories div”中的每一个都包含标准的jQueryUI选项卡。

我认为jQueryUI选项卡和我创建的额外自制选项卡之间肯定存在某种冲突，但我不确定如何跟踪它。任何帮助，提示或想法清理我的代码将不胜感激。

Answer 1

为什么不为类别和子类别使用标准的jquery UI选项卡？您可以在css中轻松地将自定义类添加到两者中，它会自动在子选项卡上打开firts选项卡，或者如果您使用cookie，则会打开最后一个选项卡，该文件在该维护中打开。

我在想的是http://jsfiddle.net/3H33m

$(document).ready(function(){
    $('#Categories').tabs({
        show: { 
            effect: "fadeIn", duration: 600 
            } 
    });

    $('.sub-categories').tabs({
        show: { 
            effect: "fadeIn", duration: 600 
            } 
    });
});

仅向第1和第2类添加内容，并向其添加子项。第二个主要类别子项从第一个基本复制。我也改变了HTML结构，但只是因为我想快速将元素放到左边。它也适用于你的结构。

在自定义JQuery中嵌套JQuery UI选项卡

1 个答案: