Question

我已经看过这个问题的版本，但他们被问到jquery的旧版本或不属于jquery ui的标签1.10.2

我的问题是：我需要添加什么jquery代码才能这样做
a）活动选项卡的选择器将添加到网址中（例如，如果tabs-6是活动的单击选项卡，则浏览器中显示的网址为page2.html＃tabs-6）
b）我可以构建链接，根据网址更改哪个标签处于活动状态（如果我在“page1.html”上建立一个指向“page2.html＃tabs-3”的链接“＃tabs- 3“将成为活动标签？

我已经将网站的几个页面合并到jquery ui标签中（使用themerolled jquery UI 1.10），我需要能够从主页上的菜单链接到各个标签。我对html / css很有经验，但我的jquery知识基本上只限于能够实现＆amp;编辑演示示例。

出于我们的目的，代码的标签块基本上是来自标签demo的stock 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>

Answer 1

对于（a） - 你必须在“选择”事件上写一些自定义代码，我认为

对于（b） - 入站链接应该可以正常工作，只需使用选项卡的div ID作为片段（但要小心Preventing scroll when using URI hash to identify tab）

通过jquery ui tabs中的url更改活动选项卡（jquery 1.10.2）

1 个答案: