我看过这个问题的版本,但他们被问及旧版本的 jquery 或不属于 jquery ui 1.10.2 的选项卡
我的问题是:
我需要添加什么 jquery 代码,以便
a) 将活动选项卡的选择器添加到 url(例如,如果 tabs-6 是活动单击选项卡,则浏览器中显示的 url 是 page2 .html#tabs-6)
b) 我可以构建链接,这些链接将根据 url 更改哪个选项卡处于活动状态(因此,如果我在“page1.html”上创建指向“page2.html#tabs-3”的链接“ #tabs-3" 将成为活动标签?
我已将网站的多个页面合并到 jquery ui 选项卡中(使用主题滚动的 jquery UI 1.10),并且我需要能够从主页上的菜单链接到各个选项卡。我对 html/css 非常有经验,但我的 jquery 知识基本上仅限于能够实现和编辑演示示例。
出于我们的目的,代码的标签块基本上是来自标签演示的库存 jquery ui。
<head>
<script>
$(function() {
$( "#tabs" ).tabs();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab One</a></li>
<li><a href="#tabs-2">Tab Two</a></li>
<li><a href="#tabs-3">Tab Three</a></li>
<li><a href="#tabs-4">Tab Four</a></li>
<li><a href="#tabs-5">Tab Five</a></li>
<li><a href="#tabs-6">Tab Six</a></li>
</ul>
</div>
<div id="tabs-1">
<p>tab 1 content</p>
</div>
<div id="tabs-2">
<p>tab 2 content</p>
</div>
<div id="tabs-3">
<p>tab 3 content</p>
</div>
<div id="tabs-4">
<p>tab 4 content</p>
</div>
<div id="tabs-5">
<p>tab 5 content</p>
</div>
<div id="tabs-6">
<p>tab 6 content</p>
</div>
</body>