Bootstrap 选项卡 - 下一个和上一个按钮

Question

我正在使用 Bootstrap 3.4。

我在带有 3 个标签的表单上使用标签丸。

我正在尝试放置下一个和上一个按钮以帮助在选项卡表单之间导航。

我已经阅读了有关该主题（和bootply ）的这篇文章，这正是我所需要的，并且我应用了必要的代码。

在我的表单上，在所有 3 个选项卡中，我总是看到 next1 按钮，我从来没有看到其他按钮。

我终于发现错误与<li class="active">代码行上的<li class="active"> （或者至少我几乎可以肯定这是错误）。

我已经搜索了 Google 和 SO 以找出如何使 js 代码正常工作，但我无法解决这个简单的问题。 我已经用尽了所有尝试，所以我转向 SO 寻求帮助。

谁能建议我如何纠正这个问题？

这是我的js代码：

$('.btnNext').click(function(){
    $('.nav-pills > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function(){
    $('.nav-pills > .active').prev('li').find('a').trigger('click');
});

这是我的 HTML 代码：

<ul class="nav nav-pills">
    <li class="active">
        <a data-toggle="tab" id="id_link_tab1" href="#tab1">
            <i class="fa fa-check-square-o icon_size26"></i>
            &nbsp;Tab #1
        </a>
    </li>
    <li class="">
        <a data-toggle="tab" id="id_link_tab2" href="#tab2">
            <i class="fa fa-file-text icon_size26"></i>
            &nbsp;Tab #2
        </a>
    </li>
    <li class="">
        <a data-toggle="tab" id="id_link_tab3" href="#tab3">
            <i class="fa fa-pencil-square-o icon_size26"></i>   
            &nbsp;Tab #3
        </a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext">Next1</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext">Next2</a>
        <a class="btn btn-primary btnPrevious">Previous3</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious">Previous4</a>
    </div>
</div>

Answer 1

    <!--Nav tabs-->
    <div class="tabs-wrapper">
        <ul class="nav classic-tabs tabs-3" role="tablist">
            <li class="nav-item nav-item-panel-1">
                <a class="nav-link waves-light active" data-toggle="tab" href="#panel-1" aria-controls="panel-1" role="tab">First Tab</a>
            </li>
            <li class="nav-item nav-item-panel-2">
                <a class="nav-link waves-light" data-toggle="tab" href="#panel-2" aria-controls="panel-2" role="tab">Second Tab</a>
            </li>
            <li class="nav-item nav-item-panel-3">
                <a class="nav-link waves-light" data-toggle="tab" href="#panel-3" aria-controls="panel-3" role="tab">Third Tab</a>
            </li>
        </ul>
    </div>

    <!--Tab panels-->
    <div class="tab-content">
        <!--Panel 1-->
        <div class="tab-pane fade in show active" id="panel-1" role="tabpanel">
            Test1
        </div>
        <!--Panel 2-->
        <div class="tab-pane fade in" id="panel-2" role="tabpanel">
            Test2
        </div>
        <!--Panel 3-->
        <div class="tab-pane fade in" id="panel-3" role="tabpanel">
            Test3
        </div>
        <div class="btn-group">
            <button class="btn" id="prevtab" type="button" data-toggle="tab">Prev</button>
            <button class="btn" id="nexttab" type="button" data-toggle="tab">Next</button>
        </div>
    </div>


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