Question

您好我是bootstrap和jQuery的新手。我创建了一个引导程序Tab，它工作正常。选项卡正在按标题更改，但我还需要分页才能更改Tab，这是我无法做到的。以下是我的情景，

Tab 1 --> next button --> go to tab 2
Tab 1  <-- previous -- Tab 2 -- next ---> Tab 3
Tab 2  <-- previous -- Tab 3

任何人都可以提供帮助。以下是我的HTML。这只是一个例子，我可以有不同数量的标签。

<div class="row">

    <!-- tabs -->
    <div class="col-md-3 col-sm-3">
        <ul class="nav nav-tabs nav-stacked nav-alternate">
            <li>
                <a href="#tab_1" data-toggle="tab">Question - 1 </a>
            </li>
            <li>
                <a href="#tab_2" data-toggle="tab">Question - 2 </a>
            </li>
            <li>
                <a href="#tab_3" data-toggle="tab">Question - 3 </a>
            </li>
        </ul>
    </div>

    <!-- tabs content -->
    <div class="col-md-9 col-sm-9">
        <div class="tab-content tab-stacked nav-alternate">
            <div id="tab_1" class="tab-pane active">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <p>Some Text Tab 1</p>
                    </div>
                </div>
                <ul class="pager">
                  <li class="next"><a class="radius-0" href="#" data-toggle="tab">Next &rarr;</a></li>
                </ul>
            </div>
            <div id="tab_2" class="tab-pane">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <p>Some Text Tab 2</p>
                    </div>
                </div>
                <ul class="pager">
                   <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li>
                   <li class="next"><a class="radius-0" href="#">Next &rarr;</a></li>
                </ul>
            </div>
            <div id="tab_3" class="tab-pane">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <p>Some Text Tab 3</p>
                    </div>
                </div>
                <ul class="pager">
                   <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li>
                </ul>
            </div>
        </div>
    </div>

</div>

Answer 1

更新了jQuery脚本以附加到上一个/下一个链接。

将class="active"更新为问题-1的li标记。

<!-- tabs -->
<div class="col-md-3 col-sm-3">
    <ul class="nav nav-tabs nav-stacked nav-alternate">
        <li class="active">
            <a href="#tab_1" data-toggle="tab">Question - 1 </a>
        </li>
        <li>
            <a href="#tab_2" data-toggle="tab">Question - 2 </a>
        </li>
        <li>
            <a href="#tab_3" data-toggle="tab">Question - 3 </a>
        </li>
    </ul>
</div>

<!-- tabs content -->
<div class="col-md-9 col-sm-9">
    <div class="tab-content tab-stacked nav-alternate">
        <div id="tab_1" class="tab-pane active">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>Some Text Tab 1</p>
                </div>
            </div>
            <ul class="pager">
              <li class="next"><a class="radius-0" href="#" data-toggle="tab">Next &rarr;</a></li>
            </ul>
        </div>
        <div id="tab_2" class="tab-pane">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>Some Text Tab 2</p>
                </div>
            </div>
            <ul class="pager">
               <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li>
               <li class="next"><a class="radius-0" href="#">Next &rarr;</a></li>
            </ul>
        </div>
        <div id="tab_3" class="tab-pane">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>Some Text Tab 3</p>
                </div>
            </div>
            <ul class="pager">
               <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li>
            </ul>
        </div>
    </div>
</div>

<script>
    $('.next').click(function(){
         $('.nav-tabs > .active').next('li').find('a').trigger('click');
    });

    $('.previous').click(function(){
        $('.nav-tabs > .active').prev('li').find('a').trigger('click');
    });
</script>

如何通过分页更改Bootstrap选项卡

1 个答案: