如果选项卡是第一个，则禁用previous按钮

Disable previous button if the tab is the first

本文关键字：previous 按钮 选项 第一个 如果      更新时间：2023-09-26

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

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

像这样使用

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

当你点击下一个按钮时，它会再次启用

相关文章：