javascript - 单击父级打开子选项卡

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);
    }

});