jQueryUI选项卡-深度链接到选项卡内容 [英] jQueryUI tabs - deeplinking into tab content

问题描述

我不确定目前是否可行，并且完成的测试似乎提供了奇怪的结果.

我在一页上有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来实现

提前谢谢

解决方案

尝试一下:

作为链接使用

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

I am not sure if this is possible at the moment, and the testing ive done seems to offer odd results.

I have on one page a section of 4 tabs, inside these tabs are several sections of text that i have each given a unique anchor name.

What i am trying to do is link from another page to say the 4th block of content in tab 3...

the tabs are all working great, and if i link to content sections on the first tab it works great.. its when i want to link to the tabs that arent the first that it gets tricky..

i have tried

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

but this doesnt work at all

and when i use just

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

i have also seen this being implemented - however it seems to have the same functionality as just using the above piece of code regardless of if this is in my jquery call

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

With either of the above 2 options while the third tab is selected i am pushed all the way to the bottom of the page. I assume this is because all the tabs are placed in list items and then jqueryui turns them into tabs.. in effect moving the tab content for number 3 from the bottom back up to the top of the tabs section..

if anyone knows how i could link to the 4th block of content on the 3rd tab i would be extremely greatful.

someone the solution might lie in $_post and $_get data.. but im not sure if thats really the case, and even then im not sure how to implement it with jqueryui

Thank you in advance

解决方案

Try this:

As a link use

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

And the script

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

这篇关于jQueryUI选项卡-深度链接到选项卡内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！