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

}）;

所以我想要做的就是在开始时禁用第二个Tab，当我点击＆＃34; NEXT＆＃34;要启用的选项卡。我试过$（＆＃34; .tabs＆＃34;）。tabs（＆＃34;禁用＆＃34;）;但没有成功。知道我该怎么办？

Answer 1

请看下面的链接。如果没有更多选项卡可以导航下一个/上一个，他隐藏了按钮。所以你可以使用相同的方法并禁用它按钮而不是隐藏。

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

以及

的演示

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

禁用/启用选项卡不工作jquery

1 个答案: