禁用/啟用選項卡不起作用

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/