jQuery嵌套选项卡没有UI

jQuery嵌套选项卡没有UI

问题描述:

试图设置嵌套选项卡没有 jQuery UI。jQuery嵌套选项卡没有UI

我有*标签工作正常,但是,不是内部标签 - 索引似乎越来越混淆*和内部标签。

$(function() { 
     $('#application-tabs nav a').on('click', function() { 
     show_content($(this).index()); 
     }); 

     show_content(0); 

     function show_content(index) { 
     // Make the content visible 
     $('#application-tabs .content.visible').removeClass('visible'); 
     $('#application-tabs .content:nth-of-type(' + (index + 1) + ')').addClass('visible'); 

     // Set the tab to selected 
     $('#application-tabs nav a.selected').removeClass('selected'); 
     $('#application-tabs nav a:nth-of-type(' + (index + 1) + ')').addClass('selected'); 
     } 
    }); 
$(function() { 
     $('.application-sub-tabs nav.sub a').on('click', function() { 
     show_content_sub($(this).index()); 
     }); 

     show_content_sub(0); 

     function show_content_sub(index) { 
     // Make the content visible 
     $('.application-sub-tabs .content-sub.visible-sub').removeClass('visible-sub'); 
     $('.application-sub-tabs .content-sub:nth-of-type(' + (index + 1) + ')').addClass('visible-sub'); 

     // Set the tab to selected 
     $('.application-sub-tabs nav.sub a.selected-sub').removeClass('selected-sub'); 
     $('.application-sub-tabs nav.sub a:nth-of-type(' + (index + 1) + ')').addClass('selected-sub'); 
     } 
    }); 

下面是我在这其中的jsfiddle:https://jsfiddle.net/81ebq0Lw/5/

上获得内部标签顶部的标签的独立运作有什么想法?

我敢肯定有设置此功能的更有效的方法...

感谢您的帮助。

有两个导航标签。你需要特定于选择器。 检查这个小提琴。

<nav id="test"> and 
$('#application-tabs #test a').on('click', function() 

https://jsfiddle.net/e8eLmdj0/

新:https://jsfiddle.net/e8eLmdj0/2/

+0

谢谢你 - 这是非常合情合理的,为什么这是越来越糊涂。我会如何设置第一个子选项卡处于活动状态,每次选择*别的选项卡? – d38

+0

例如 - 选项卡2下的子选项卡较少,选择选项卡1或选项卡3中的子选项卡3,然后返回选项卡2 - 任何子选项卡都不处于活动状态。 https://jsfiddle.net/e8eLmdj0/1/ – d38

+0

谢谢@techLove - 非常感谢您的帮助! – d38