2

我在使用 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 打开子选项卡。

谢谢

4

2 回答 2

1

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

于 2015-01-14T15:08:35.833 回答
1

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

于 2012-06-11T08:19:57.920 回答