Jquery :从选项卡内链接到下一个/特定选项卡

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

你需要手动处理。

首先，我们应该使用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>

​