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选项将active标签设置为新标签，然后调用refresh

＆＃13;

$("#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");
});

＆＃13;

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

＆＃13;

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

2 个答案: