jquery - 从外部页面链接到 Jquery UI 选项卡滚动到页面底部

Question

当从外部页面链接到 jqueryui 选项卡时，我使用

<a href="page.html#tab-3">link</a> 

并且在大多数情况下，当页面加载并显示相应选项卡时，此功能正常。

当我在这些选项卡之一中有大量内容时，问题就开始了。当页面首次加载时，选项卡内容加载时没有 jquery 样式(作为一个长线性列表)，然后加载 jqueryui 样式，但我滚动到页面底部。

我知道我滚动到页面底部，因为这是页面加载时#tab-3 ID/NAME 的位置。然后我如何链接到父选项卡组而不是我链接到的 ID？

我实际上希望在选项卡组上方滚动约 50px，以便我们的访问者可以看到选择了哪个选项卡。

我正在使用 jquery 1.10.2 和 jquery-ui-1.10.3。

Answer 1

When the page first loads the tab contents loads without jquery styling (as a long linear list)

首先让我们解决加载问题...

更好地加载选项卡的一个简单解决方法是在选项卡的父级上设置 display: none; ，然后使用 .show() 让它们出现一次一切都很好并且加载如下:

#tabs {
    display:none;
}

 $(function () {
     $("#tabs").show().tabs();
 });

现在讨论主要问题...令人惊讶的是，通过在选项卡内容中添加负上边距和一些填充可以轻松解决这个问题

.ui-tabs .ui-tabs-panel {
    padding-top: 65px;
    margin-top: -50px;
}

基本上，您是用负边距向上拉动面板，然后用内边距将面板中的内容推回原处。这会将面板的顶部带到选项卡小部件的顶部，并在导航到指定选项卡的页面时让选项卡链接舒适地停留在 View 中，从而产生令人愉快的副作用。

<强> Working Example, external links to specific tabs
Working Example showing relevant code