Question

I am trying to position links to jQuery Tabs under the tab content, with the tabs navigation in its own DIV (for styling purposes). Here is my markup:

    <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>

How would I go about activating Tabs using the ul in #fpTabs-nav for navigation?

Thanks!

Answer 1

You can use this to select a specific tab programmatically

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

So it would be something like:

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