jQuery UI选项卡：从选项卡中链接到下一个/特定选项卡

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

最简单的解决方案是将click事件附加到该链接。 就像是

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

Answer 2

您需要手动处理它。

首先，我们应该将active标签使用新标签主动选项，然后调用刷新

 $("#admitpage").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); $("#admitpage li").removeClass("ui-corner-top").addClass("ui-corner-left"); $(".next").click(function(e) { e.preventDefault(); var index = parseInt(this.href.split("#tab-")[1]) - 1; $("#admitpage").tabs("option", "active", index).tabs("refresh"); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <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>