1

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

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

当页面加载并显示相应的选项卡时，此功能在大多数情况下都很好。

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

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

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

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

4

2 回答 2

3

当页面第一次加载选项卡内容时加载没有 jquery 样式（作为一个长的线性列表）

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

将选项卡加载得更好的一个简单解决方法是display: none;在选项卡的父级上进行设置，然后.show()在一切正常并加载后使用以使它们出现：

#tabs {
    display:none;
}

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

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

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

基本上，您使用负边距向上拉面板，然后使用填充将面板中的内容向下推。这会将面板的顶部带到选项卡小部件的顶部，并提供令人愉悦的副作用，即在导航到指定选项卡的页面时让选项卡链接舒适地停留在视图中。

工作示例，特定选项卡的外部链接
显示相关代码的工作示例

于 2013-12-05T16:10:34.117 回答
0

有几种方法可以做到这一点——我打算做例子，但那里已经有完全可以接受的答案，所以我只是参考它们。

首先，您可以在 URL 中传递一个您可以解释的参数，然后在页面加载完成后激活该选项卡，而不是直接跳转到 URL 中的选项卡。这是一个答案显示：更改 jQuery UI 选项卡的选定选项卡

其次，做你正在做的事情，然后滚动到正确的位置，代码如下：

$(window).scrollTop($('div#tabs').offset().top)

你可以玩弄它以获得正确的位置。更多：jQuery：移动窗口视口以显示新切换的元素

最后，考虑让页面加载时隐藏（一些）元素，然后在页面准备好后将它们更改为在 CSS 中可见。页面加载时应该有任何奇怪之处。

于 2013-12-05T08:08:08.867 回答