嵌套哈希/可链接选项卡

Question

我正在尝试使用一组哈希标签，但在添加嵌套标签时遇到了问题。我正在使用this JQuery选项卡插件。

我使用的代码适用于非嵌套选项卡：

        <script>
            jQuery(document).ready(function() {
                var $tabs = $(".tab-container").hashTabs({});
            });
        </script>
        <div class="hash-tabs">
            <article class="tab-container">
                <nav>
                    <li><a href="#main-tab1">Main Tab 1</a></li>
                    <li><a  href="#main-tab2">Main Tab 2</a></li>
                </nav>
                <div>
                    <section id="main-tab1">
                        Main Tab 1 Content
                    </section>
                    <section id="main-tab2">
                        Main Tab 2 Content
                    </section>
                </div>
            </article>
        </div>

但是，当我添加嵌套选项卡时，这不起作用：

        <script>
            jQuery(document).ready(function() {
                var $tabs = $(".tab-container").hashTabs({});
                var $tabs = $(".secondary-tab-container").hashTabs({});
            });
        </script>

        <div class="hash-tabs">
            <article class="tab-container">
                <nav>
                    <li><a href="#main-tab1">Main Tab 1</a></li>
                    <li><a  href="#main-tab2">Main Tab 2</a></li>
                </nav>
                <div>
                    <section id="main-tab1">
                        <div class="hash-tabs">
                            <article class="secondary-tab-container">
                                <nav>
                                    <li><a href="#secondary-tab1">Main Tab 1</a></li>
                                    <li><a  href="#secondary-tab2">Main Tab 2</a></li>
                                </nav>
                                <div>
                                    <section id="secondary-tab1">
                                        Main Tab 1 Content
                                    </section>
                                    <section id="secondary-tab2">
                                        Main Tab 2 Content
                                    </section>
                                </div>
                            </article>
                        </div>
                    </section>
                    <section id="main-tab2">
                        Main Tab 2 Content
                    </section>
                </div>
            </article>
        </div>

对此有任何帮助表示赞赏！