1

我的页面上有 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;
    }
  });
});

但它不起作用。有任何想法吗？

4

1 回答 1

3

在这种情况下，我看不出使用选项卡的意义……但要回答您的问题……

假设我们在 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;
    }
});
于 2012-11-19T08:14:56.603 回答