jQueryUI选项卡 - 深入链接到选项卡内容

Question

我不确定此刻是否可行,而且我所做的测试似乎提供了奇怪的结果.

我在一个页面上有一个4个选项卡的部分,这些选项卡内部是几个文本部分,每个部分都给出了一个唯一的锚名称.

我想要做的是从另一页链接到标签3中的第4块内容...

选项卡都很好用,如果我链接到第一个选项卡上的内容部分它很好..它当我想要链接到第一个它变得棘手的选项卡..

我试过了

<a href="http://example.com#tab-3#content-4" ></a>

但这根本不起作用

当我使用时

<a href="http://example.com#tab-3"></a>

我也看到了这个实现 - 但它似乎具有与使用上面的代码相同的功能,无论这是否在我的jquery调用中

$(function(){
  $('tabs').tabs();
  var hash = location.hash;
  $('tabs').tabs( "select" , hash );
});

使用上述2个选项中的任何一个,而选择第三个选项卡时,我会一直推到页面底部.我假设这是因为所有选项卡都放在列表项中,然后jqueryui将它们转换为选项卡..实际上将数字3的选项卡内容从底部向上移动到选项卡部分的顶部.

如果有人知道如何链接到第3个选项卡上的第4块内容,我会非常感激.

有人解决方案可能在$ _post和$ _get数据..但我不确定是否真的如此,即便如此我不知道如何用jqueryui实现它

先感谢您

Answer 1

试试这个:

作为链接使用

<a href="http://example.com#content-4" ></a>

和脚本

    $(function(){
        $tabs = $('#tabs').tabs();

        var hash = location.hash.substring(1),

        $anchor = $tabs
            .find('a[name="' + hash + '"]'),

        tabId = $anchor.closest('.ui-tabs-panel')
            .attr('id');

        $tabs.find('ul:first a').each(
            function(i){
                    if($(this).attr('href') === '#' + tabId){
                        $tabs.tabs('select', i);
                        window.scrollTo(0, $anchor.position().top);
                        // Stop searching if we found it
                        return false;
                    }
            }
        );
    });

Answer 2

尝试

<a href="#" onclick="changetab(3)">Tab 4</a>


function changetab(idx)
{
  $('tabs').tabs( "select" , idx);
}