jQuery UI 选项卡 - 深度链接到选项卡内容

Question

我不确定目前这是否可能，并且我所做的测试似乎提供了奇怪的结果。

我在一页上有 4 个选项卡，这些选项卡内有几个文本部分，每个部分都有一个唯一的 anchor 名称。

我想做的是从另一个页面链接到选项卡 3 中的第四个内容 block ...

这些选项卡都工作得很好，如果我链接到第一个选项卡上的内容部分，它会很好用。当我想链接到不是第一个选项卡的选项卡时，它会变得很棘手。

我已经尝试过

<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 );
});

使用上述两个选项中的任何一个，当选择第三个选项卡时，我会被一直推到页面底部。我认为这是因为所有选项卡都放置在列表项中，然后 jqueryui 将它们转换为选项卡.. 实际上将数字 3 的选项卡内容从底部返回到选项卡部分的顶部..

如果有人知道我如何链接到第三个选项卡上的第四个内容 block ，我将非常感激。

有人的解决方案可能在于 $_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;
                    }
            }
        );
    });