从另一个 DIV 中选择 jQuery 选项卡

Question

我试图将 jQuery 选项卡的链接定位在选项卡内容下，并将选项卡导航放在自己的 DIV 中（出于样式目的）。这是我的标记：

    <div id="fpTabs">
  <div id="fpTab-1">
    <p>This is the first tab</p>
  </div>
  <div id="fpTab-2">
    <p>This is the second tab...</p>
  </div>
  <div id="fpTab-3">
    <p>This is the third tab.. </p>
  </div>
</div>
<div id="fpTabs-nav">
   <ul>
      <li><a href="#fpTab-1">Tab 1</a></li>
      <li><a href="#fpTab-2">Tab 2</a></li>
      <li><a href="#fpTab-3">Tab 3</a></li>
   </ul>
</div>

如何使用 #fpTabs-nav 中的 ul 来激活选项卡进行导航？

谢谢！

Answer 1

您可以使用它以编程方式选择特定选项卡

var $tabs = $("#fpTabs").tabs();
$tabs.tabs('select',1); // will select the 2nd tab, index is 0-based

所以它会是这样的：

$("#fpTabs-nav ul li").click(function() {
   $tabs.tabs('select', $(this).index());
});