Question

我的页面上有jQuery UI选项卡，但我想将它们用作页面之间的导航，而不是像设计那样显示和隐藏div。所以基本上我仍然想要使用jQuery UI选项卡，但是用于全局导航和正确的突出显示。

有人可以帮我这个吗？

我已经可以导航了，但是我仍然坚持在下一页中突出显示正确的项目。任何想法如何实现？

$(document).ready(function() {
  var iSelectedTab = $('div#tabs ul a').filter('a[href="#"]');
  $("#tabs").tabs({
    selected: iSelectedTab,
    select: function (e, ui) {
      window.location.href=ui.tab.href;
    }
  });
});

但它不起作用。有什么想法吗？

Answer 1

在这种情况下我没有看到使用标签的意义......但要回答你的问题...

假设我们在page1.html中 - 你需要使用tabs-0激活，你的标签结构应该是这样的（是的 - 它不会尊重Jquery UI标签的标准结构）：

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">Page 1</a></li>
       <li><a href="page2.html#tabs-2">Page 2</a></li>
       <li><a href="page3.html#tabs-3">Page 3</a></li>
    </ul>
    <div id="tabs-1">This is page 1</div>
</div>

请注意，此页面中没有其他标签容器。 page2.html将具有与上面相同的结构

<div id="tabs">
    <ul>
       <li><a href="page1.html#tabs-1">Page 1</a></li>
       <li><a href="#tabs-2">Page 2</a></li>
       <li><a href="page3.html#tabs-3">Page 3</a></li>
    </ul>
    <div id="tabs-2">This is page 2</div>
</div>

此时，您不需要任何特殊的JS代码，

$("#tabs").tabs({
    select: function (e, ui) {
        window.location.href=ui.tab.href;
    }
});

使用jQuery UI选项卡重定向到另一个页面

1 个答案: