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/

上獲得內部標籤頂部的標籤的獨立運作有什麼想法？

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

感謝您的幫助。

來源

2017-05-04 d38

有兩個導航標籤。你需要特定於選擇器。檢查這個小提琴。

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

https://jsfiddle.net/e8eLmdj0/

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

來源

2017-05-04 18:45:23 tech2017

謝謝你 - 這是非常合情合理的，爲什麼這是越來越糊塗。我會如何設置第一個子選項卡處於活動狀態，每次選擇最高級別的選項卡？ – d38

例如 - 選項卡2下的子選項卡較少，選擇選項卡1或選項卡3中的子選項卡3，然後返回選項卡2 - 任何子選項卡都不處於活動狀態。 https://jsfiddle.net/e8eLmdj0/1/ – d38

謝謝@techLove - 非常感謝您的幫助！ – d38

jQuery嵌套選項卡沒有UI

回答

相關問題