通过JqueryUI选项卡导航使用<a>标签

Question

我发现在几篇文章中可以使用按钮或标签来浏览JqueryUI选项卡。

我使用这种简单的方法

$("#vtabs").tabs(); 

    $("#tabsinner").tabs(); 

    $(".changeTab").click(function() { 
     alert("asdas"); 
     var selected = $("#tabsinner").tabs("option", "selected"); 
     $("#tabsinner").tabs("option", "selected", selected + 1); 
    }); 

和HTML：

<div id="vtabs"> 
<ul id="verticalUl"> 
    <li><a href="#vtab-1">Outer Tab 1</a></li> 
    <li><a href="#vtab-2">Outer Tab 2</a></li> 
    <li><a href="#vtab-3">Outer Tab 3</a></li> 
</ul> 
<div id="vtab-1"> 
    <div id="tabsinner" > 
     <ul id="horizontalUl"> 
      <li><a href="#tabsinner-1">Inner Tab 1</a></li> 
      <li><a href="#tabsinner-2">Inner Tab 2</a></li> 
      <li><a href="#tabsinner-3">Inner Tab 3</a></li> 
     </ul> 
     <div id="tabsinner-1"> 
      <h2>Content heading 1</h2> 
      <button type="button" class="nexttab">Next Tab</button> 
     </div> 
     <div id="tabsinner-2"> 
      <h2>Content heading 2</h2> 
      <button type="button" class="nexttab">Next Tab</button> 
     </div> 
     <div id="tabsinner-3"> 
      <h2>Content heading 3</h2> 
     </div> 
    </div> 
</div> 
<div id="vtab-2"> 
    <h2>Vertical Tab Content heading 2</h2>  
</div> 
<div id="vtab-3"> 
    <h2>Vertical Tab Content heading 3</h2> 
</div> 

现在我使用垂直制表符到左侧和比外内更多的水平突出部标签（嵌套标签）。现在我认为这不是问题，因为我删除了外面的那个，但它仍然不起作用。

谢谢！

Answer 1

有2个问题，我可以看到，类下一步按钮的是nexttab和使用的选项是active

$(".nexttab").click(function() { 
    var selected = $("#tabsinner").tabs("option", "active"); 
    $("#tabsinner").tabs("option", "active", selected + 1); 
}); 

演示：Fiddle