2

我看过这个问题的版本,但他们被问及旧版本的 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>
4

1 回答 1

-1

对于(a)-我认为您必须在“选择”事件上编写一些自定义代码

对于 (b) - 入站链接应该可以正常工作,只需使用选项卡的 div ID 作为片段(但在使用 URI 哈希标识选项卡时要小心防止滚动)

于 2013-05-02T14:54:51.490 回答