禁用/启用选项卡不起作用

Question

我有一个脚本，该脚本在html中的一个选项卡上具有下一个和上一个按钮，因此当我单击“下一个”时，它将转到另一个选项卡，第一个选项卡上的上一个按钮被禁用，而最后一个选项上的一个下一个按钮被禁用。标签。 这是我的html：

        <div class="tabbable">

  <ul class="nav nav-tabs" id="tab_bar">
    <li class="active"><a href="#tab1" data-toggle="tab">Step 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Step 2</a></li>
  </ul>

  <div class="tab-content" >
    <div class="tab-pane fade active in" id="tab1">
      <div class="row">
        <div class="content">
          Some text enter code here here
        </div>
      </div>
    </div>

    <div class="tab-pane fade" id="tab2">
      Some text here
    </div>
  </div>
  <button class="btn" id="prevtab" type="button">Back</button>
  <button class="btn" id="nexttab" type="button">Next</button>
</div>

到目前为止，这是我的脚本：

$(document).ready(function () {
var $tabs = $('.tabbable li');

$('#prevtab').attr("disabled", true);

$('#prevtab').on('click', function () {

    if ($tabs.filter('.active').prev('li').length == 1) {
        $(this).attr("disabled", true);
    }
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
    $('#nexttab').prop("disabled", false);
});

$('#nexttab').on('click', function () {
    if ($tabs.filter('.active').next('li').length == 1) {
        $(this).attr("disabled", true);
    }
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
    $('#prevtab').prop("disabled", false);
});

}）;

因此，我想做的是首先禁用第二个选项卡，然后单击“下一步”以启用该选项卡。 我试过$（“ .tabs”）.tabs（“ disable”）; 但没有成功。 知道我该怎么办吗？

Answer 1

看下面的链接。如果没有更多标签可以浏览下一个/上一个，他将隐藏按钮，因此您可以使用相同的按钮并禁用b按钮来代替隐藏。

http://www.aspsnippets.com/Articles/jQuery-UI-Tabs-Navigation-using-Next-Previous-Buttons.aspx

和那个的演示

http://aspsnippets.com/demos/398/