javascript - 没有 UI 的 jQuery 嵌套选项卡

Question

尝试在没有 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/

关于让内部选项卡独立于顶部选项卡运行有什么想法吗？

我确信有更有效的方法来设置它......

感谢您的帮助。

Answer 1

有两个导航标签。你需要明确选择器。检查这个 fiddle 。

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

https://jsfiddle.net/e8eLmdj0/

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