Question

我有主要标签和子标签，我的问题是如何通过直接链接访问子标签。

示例：mypage.html＃subtab2

默认我们只能访问主要标签。

mypage.html＃tab2正在运行..

    <script type="text/javascript">
    $(document).ready(function() {
      $('.tabs').tabs();
      $('.subtabs').tabs();
    });

   <div class="tabs">
 <ul>
   <li><a href="#tab1">Tab1</a></li>
   <li><a href="#tab2">Tab2</a></li>
</ul>
   <div id="tab1">
        <div class="subtabs">
            <ul>
                <li><a href="#subtab1">Subtab1</a></li>
                <li><a href="#subtab2">Subtab2</a></li>
            </ul>
        <div id="subtab1">
             Some content1
        </div>
        <div id="subtab2">
             Some content2
        </div>
        </div>

    </div>
   <div id="tab2"></div>

我搜索了类似的问题，但没有找到正确的答案，现在我重新发帖。

How to make work the jquery nested tab link?

Answer 1

正如我在此发布的How to make work the jquery nested tab link?这是我对此问题的回答/解决方法：

我遇到了同样的问题。我找到了一个JS修复程序。请注意，在您的示例中，您在第一个选项卡中有子选项卡，第一个选项卡是打开的默认选项卡。使用我的修复程序，您可以将子选项卡放在主选项卡的任何内容中。检查Plunker是否有工作示例。

http://run.plnkr.co/plunks/Wr91Bm/#subtab2

我创建了函数openParentTab()，并在创建$('.tabs, .subtabs').tabs();

后立即调用了它

function openParentTab() {
    locationHash = location.hash.substring( 1 );
    console.log(locationHash);
    // Check if we have an location Hash
    if (locationHash) {
        // Check if the location hash exsist.
        var hash = jQuery('#'+locationHash);
        if (hash.length) {
            // Check of the location Hash is inside a tab.
            if (hash.closest(".tabContent").length) {
                // Grab the index number of the parent tab so we can activate it
                var tabNumber = hash.closest(".tabContent").index();
                jQuery(".tabs.fix").tabs({ active: tabNumber });
            }
        }
    }
}

如果您有一个大页面，并且您发现焦点不在正确的子标签上，则可以在jQuery(".tabs.fix").tabs({ active: tabNumber });下面添加以下内容

hash.get(0).scrollIntoView();
setTimeout(function() {
    hash.get(0).scrollIntoView();
}, 1000);

请参阅代码：http://plnkr.co/Wr91Bm

Jquery通过链接打开子选项卡（nest-tabs）

1 个答案: