Открытие суб-вкладки при нажатии на родительский

Question

У меня есть следующий код для отображения содержимого с вкладками.

В момент нажатия кнопки «# tabs1» показаны подписи, но пользователю нужно нажать «# sub1» для отображаемого содержимого.

Когда щелкнули «# tabs1», я бы хотел, чтобы первый субтитр ('# sub1') этого раздела отображался автоматически. Любые идеи, как я мог бы это достичь?

<nav class="inner-nav top"> 
     <ul> 

      <li><a href="#tabs1">Tabs One</a></li> 
      <li><a href="#tabs2">Tabs Two</a></li> 

     </ul> 
    </nav> 

    <!-- Tabs #1 Begin --> 

    <section class="tab-content" id="tabs1"> 

     <nav class="inner-nav sub"> 
      <ul> 

       <li><a href="#1sub1">Sub Tab1 One</a></li> 
       <li><a href="#1sub2">Sub Tab1 Two</a></li> 

      </ul> 
     </nav> 

     <section class="tab-content" id="1sub1"> 

      // Sub Tab One Content 

     </section> 

     <section class="tab-content" id="1sub2"> 

      // Sub Tab Two Content 

     </section> 

    </section> 

    <!-- Tabs #1 End --> 


    <!-- Tabs #2 Begin --> 

    <section class="tab-content" id="tabs2"> 

     <nav class="inner-nav sub"> 
      <ul> 

       <li><a href="#2sub1">Sub Tab2 One</a></li> 
       <li><a href="#2sub2">Sub Tab2 Two</a></li> 

      </ul> 
     </nav> 

     <section class="tab-content" id="2sub1"> 

      // Sub Tab2 One Content 

     </section> 

     <section class="tab-content" id="2sub2"> 

      // Sub Tab2 Two Content 

     </section> 

    </section> 

    <!-- Tabs #2 End --> 

//// JQuery:

<script> 

     jQuery(function() { 
     jQuery(".tab-content").hide().first().show(); 
     jQuery(".inner-nav li:first").addClass("active"); 

     jQuery(".inner-nav a").on('click', function (e) { 
      e.preventDefault(); 
      jQuery(this).closest('li').addClass("active").siblings().removeClass("active"); 
      jQuery(jQuery(this).attr('href')).show().siblings('.tab-content').hide(); 
     }); 

     var hash = jQuery.trim(window.location.hash); 

     if (hash) jQuery('.inner-nav a[href$="'+hash+'"]').trigger('click'); 

     if (location.hash) { 
    setTimeout(function() { 

    window.scrollTo(0, 0); 
    }, 1); 
} 

     }); 

    </script> 

Answer 1

Как насчет this

я добавил две строки кода к существующему коду

$(function() { 
    $(".tab-content").hide().first().show(); 
    $(".inner-nav li:first").addClass("active"); 

    $(".inner-nav a").on('click', function (e) { 
     e.preventDefault(); 
     $(this).closest('li').addClass("active").siblings().removeClass("active"); 
     $($(this).attr('href')).show().siblings('.tab-content').hide(); 
     $($(this).attr('href')).find('a').eq(0).trigger('click'); // This is a new line 
    }) 
    .eq(0).trigger('click'); // This is a new line 

    var hash = $.trim(window.location.hash); 

    if (hash) $('.inner-nav a[href$="' + hash + '"]').trigger('click'); 

    if (location.hash) { 
     setTimeout(function() { 
      window.scrollTo(0, 0); 
     }, 1); 
    } 

});