javascript - 如果选项卡是第一个，则禁用上一个按钮

Question

如果选项卡是第一个，我想禁用上一个按钮；如果选项卡是最后一个，我想禁用下一个按钮。到目前为止，这是我的脚本:

$(document).ready(function () {
    var $tabs = $('.tabbable li');
    $('#prevtab').on('click', function () {
        $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
    });
    $('#nexttab').on('click', function () {
        $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
    });
});

这是我的 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 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>

如果选项卡是第一个/最后一个，如何禁用后退和下一个按钮？

编辑:

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

});

Answer 1

像这样使用

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

});

编辑

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

当您点击下一步按钮时，它将再次启用