如何使工作jQuery的嵌套的标签链接？(How to make work the jquery n

我有与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

文章来源: How to make work the jquery nested tab link?