javascript - Jquery UI 选项卡 : Link to next/specific tab from within tab

Question

我实现了以下 jquery 代码:

$( "#admitpage" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#admitpage li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

HTML 类似于:

<div id="admitpage">
    <div class="navigation">
        <ul>
            <li><a href="#tab-1">Tab 1</a></li>
            <li><a href="#tab-2">Tab 2</a></li>
        </ul>
    </div>
    <div class="tab" id="tab-1">
        <p>Tab 1 content</p>
        <a class="next" href="#tab-2">Next</a>
    </div>
    <div class="tab" id="tab-2">
        <p>Tab 2 content</p>
    </div>
</div>

现在的问题是，a.next 不起作用。我想是因为它已经在一个选项卡中了。我该如何让它发挥作用？任何帮助将不胜感激。在过去的一个小时里我一直在努力解决这个问题。

Answer 1

最简单的解决方案是将点击事件附加到该链接。类似的东西

  $(".next").click(
    function() {
      var currentIdx = $('#admitpage').tabs('option', 'active');
      $("#admitpage").tabs({
        active: currentIdx + 1
      });
      return false;
    }
  );