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