7

我正在运行一个 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()
        });
});

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

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

4

1 回答 1

1

为什么不对类别和子类别使用标准的 jquery UI 选项卡？您可以轻松地将自定义类添加到 css 中，它会自动在子选项卡上打开第一个选项卡，或者如果您使用 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 结构，但这只是因为我想将元素快速放入左右。它也应该适用于您的结构。

于 2012-12-01T10:52:03.533 回答