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

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

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

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

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

根据您使用的服务器端脚本语言（如果有），您可以传递您希望在 url 中选择的选项卡 $_GET[] 它，然后在调用tabs(); 小部件。然后使用我在另一个堆栈线程中找到的漂亮函数，您可以获得所选元素的坐标并滚动到它。

例如使用 PHP

<!--- link on another page -->
<a href="yourtabspage.php?tab=2&ctntid=content4">Your Link to Fourth Piece of Content in Second Tab</a>

然后在您的标签页上：

<?php 
  $your_tab = $_GET['tab']; 
  $your_selected_element = $_GET['ctntid'];
?>

<script type="text/javascript">

// this function is from another post on stackoverflow, I didn't write it.

function getOffset( el ) {
  var _x = 0;
  var _y = 0;
  while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: _y, left: _x };
}

jQuery(document).ready(function () {
  $("#tabs").tabs({
    selected: "<?php echo $your_tab; ?>"
  });


});

jQuery(window).load(function() {
  var x = getOffset( document.getElementById('<?php echo $your_selected_element;?>') ).left;
  var y = getOffset( document.getElementById('<?php echo $your_selected_element;?>') ).top;
  window.scrollTo(x,y)
});

</script>

Answer 3

老问题，但我今天遇到了这个深层链接 jQuery 选项卡的需求。我还必须保留回传的哈希值。下面通过将哈希附加到表单的操作来深度链接到 jQuery 选项卡并在回发时保留哈希。

    $(document).ready(function ($) {

        //Initialize the jQuery tabs
        $("#tabs").tabs({
            activate: function (event, ui) {
                //Add this ID to the URL, and scroll back to the top
                location.hash = ui.newPanel.attr('id');
                window.scrollTo(0, 0);

                //Update the form to append the hash to the action, for post-backs
                var newAction = $("#frmMain").attr("action").split('#')[0] + location.hash;
                $("#frmMain").attr("action", newAction);
            }
        });

        //When the page loads, if we have a hash, load that tab
        var hash = location.hash;
        if (hash.length > 0) {
            //Load the tab associated with this hash
            $("#tabs").tabs("load", hash);

            //Re-update the form to append the hash to the action, for post-backs
            var newAction = $("#frmMain").attr("action").split('#')[0] + hash;
            $("#frmMain").attr("action", newAction);
        }

    });

Answer 4

试试

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


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