如何使 jquery 嵌套选项卡链接工作

How to make work the jquery nested tab link?

本文关键字：链接 工作 选项 嵌套 何使 jquery      更新时间：2023-09-26

我在使用Jquery选项卡UI时遇到问题。

<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>
</div>

现在，当我尝试访问像page.html#subtab1这样的子选项卡时，它不起作用，但是页面.html#tab1有效。我做错了什么？基本上我需要使用 URL 打开子选项卡。

谢谢

你缺少<div id="tab2"></div>，这将给出一个jQuery异常。尝试将其添加到代码中，您的链接将起作用。

我遇到了同样的问题。我为它找到了一个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

相关文章：