Question

我正在使用Bootstrap 3.4。

我在带有3个标签的表单上使用tab-pills。

我正在尝试下一个＆amp;以前的按钮有助于在标签表格之间进行导航。

我已经阅读了关于该主题的post（以及bootply），这正是我的要求，并且我应用了必要的代码。

在我的表单上，在所有3个标签中，我总是看到next1按钮，我从未看到其他按钮。

我终于发现错误与<li class="active">代码行＆gt;上的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');
        });
    })

Bootstrap标签 - Next＆amp;以前的按钮

1 个答案: