Question

我遇到了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的子标签时，它不起作用，但是page.html＃tab1有效。我究竟做错了什么？基本上我需要使用URL打开子标签。

由于

Answer 1

您缺少<div id="tab2"></div>，这会产生jQuery异常。尝试将其添加到代码中，您的链接就可以使用。

Answer 2

我遇到了同样的问题。我找到了一个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嵌套选项卡链接工作？

2 个答案: