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

我现在不确定这是否可行，我所做的测试似乎提供了奇怪的结果

我在一个页面上有一个由4个选项卡组成的部分，在这些选项卡中有几个文本部分，每个部分都有一个唯一的锚名称

我想做的是从另一个页面链接到第四块内容，在标签3中

这些标签都很好用，如果我链接到第一个标签上的内容部分，效果会很好。。当我想链接到不是第一个的标签页时，它就变得棘手了

我试过了

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

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

如果有人知道我如何链接到第三个标签上的第四块内容，我将非常感谢

解决方案可能存在于$\u post和$\u get data中。。但是我不确定是否真的是这样，即使这样，我也不确定如何用jqueryui实现它

提前谢谢你

试试看

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


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

试试这个：

作为链接使用

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

---

根据您使用的服务器端脚本语言（如果有的话），您可以将要在url中选择的选项卡传递给$\u GET[]it，然后在调用选项卡时将其作为所选选项回显；小装置。然后使用我在另一个堆栈线程中找到的一个漂亮函数，您可以获得所选元素的坐标并滚动到它

e、 g.使用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>

---

老问题，但我今天遇到了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);
        }

    });

---

您需要url中的选项卡id吗？例如，您的url看起来像吗http://example.comcontent-4，然后使用JavaScript选择包含id为content-4的元素的选项卡？@andrew:在url中链接到当前选项卡上不存在的ie content-4部分意味着浏览器只将自身定位到页面底部。。如果内容未移动到选项卡，并且由于页面在javascript之前加载，则在浏览器定位到页面底部后更改选项卡意味着加载新选项卡时，内容仍位于页面底部。。如果有办法加载选项卡，然后选择内容，则可能会起作用。。但是我宁愿不需要拆分URL来获取变量..这是有道理的。我认为，如果将URL与元素ID保持一个单独的散列，不管它在页面中的哪个选项卡上，都会优雅地降级，并且这些链接在没有选项卡小部件的情况下仍然可以工作。如果你不需要支持没有JavaScript的人，你有更多的选择。是这样吗？这在另一页上不起作用。。我需要从另一个页面链接到标签内的内容刚刚注意到这是一个老问题，但我猜答案仍然有效啊，我猜滚动条是使它工作的东西。[顺便说一句，使用$.closest，您可以从content-4锚点推断包含选项卡3的内容。因此，url中的片段可以减少为content-4。]我将暂缓悬赏一段时间，看看是否有其他方法。但如果没有，我可以让你的工作，然后我会手动奖励。基本技术-在url中指定锚名称，在正文中标识命名元素，使用“$eltclosest”标识/选择包含的选项卡，然后使用top=anchorElt.offset.top”滚动到锚-看起来不错。但结果是不可预测的；页面越向下，错误越大。$window.scrollTop和$elt.offset.top之间似乎存在某种冲突。有没有经历过类似的事情？我更新了脚本，取消了锚的使用，并使用了$.coest方法。我想这个例子应该适用于$window.scrollTop。谢谢，这和我的差不多，尽管你的有点干净。你确定我们要的是position.top而不是offset.top吗？我知道你在做什么。核心思想是相同的-识别选项卡，选择选项卡，然后滚动到选项卡中的块。与使用$.offset或$.position直接查询元素相比，用于计算偏移量的getOffset函数似乎工作得更可靠—尽管仍然不完美，这令人费解。我会到处看看，看看进展如何。谢谢

<!--- 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>

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

    });