jQuery HTML href选项卡

时间:2012-10-11 14:50:15

标签: jquery html tabs

我使用的jQuery标签如下: http://jqueryui.com/tabs/ 我可以在顶部显示一行标签,并将HTML拆分为这些部分,并通过激活这些标签来查看。

然而,我对这种感觉并不完全满意。

由于我在系统周围有各种Href重定向到各个地方,我想知道是否有人知道是否有一种方法可以指向显示这些标签的页面的链接,从URL打开相关选项卡或采用不同的方法?

例如,当您为div提供一个ID并且可以href到该ID并且页面向下滚动到该点时的简单方法。通过此,您可以在URL中指定要转到的页面上的哪个选项卡。虽然一旦将它与jQuery结合使用,这是不可能的。

1 个答案:

答案 0 :(得分:1)

创建标签 我们所有的调用都发生在document.ready()函数中。 首先,我们将使用常规的jQuery UI技术创建选项卡。在这种情况下,我们用一个“tab-set”类将一个标签ul和相关的div包装在一个div中。

$(".tab-set").tabs();

让新访客进入正确的标签 接下来,我们想看看是否需要加载特定的选项卡。我们将检查我们所在的页面是否有“tab-set”div,并检查URL以查看其末尾是否有哈希值。如果两者都是,那么我们使用scrollTo插件将我们跳转到“tab-set”div - 这使得标签保持可见 - 同时依赖jQuery UI的默认行为来显示正确的标签内容。

if($(".tab-set") && document.location.hash){
  $.scrollTo(".tab-set");
}

为标签创建可收藏的网址 一旦用户在页面上,我们使用localScroll插件更新地址栏中的URL,同时防止页面重新加载。

$(".tab-set ul").localScroll({ 
  target:".tab-set",
  duration:0,
  hash:true
});

这就是说“滚动到div'选项卡集'而不是链接本身的目标,没有动画,并将哈希添加到URL”。 而已!满足所有要求。

来自How to Open A specific Tab from Link in jQuery