Question

我有两个标签。当我尝试提交第二个选项卡时，它将检查一些mandantory字段，它将显示一条错误消息。但是当页面重新加载时，它会显示第一个选项卡。我在stackflow中看到了几个线程并实现了它，但我遇到了同样的问题。

这是我的代码

$(function() { 
                $('a[data-toggle="tab"]').on('shown', function(e){
                    //save the latest tab using a cookie:
                    $.cookie('last_tab', $(e.target).attr('href'));
                });
                //activate latest tab, if it exists:
                var lastTab = $.cookie('last_tab');
                if (lastTab) {
                    $('a[href=' + lastTab + ']').tab('show');
                }
                else
                {
                    // Set the first tab if cookie do not exist
                    $('a[data-toggle="tab"]:first').tab('show');
                }
            });

        </script>



        <div class="container">


            <div class="page-header">
                <h2>Payment</h2>
                <div class="clr"></div>
            </div>

            <div class="tabbable">
                <!-- Only required for left/right tabs -->
                <ul class="nav nav-tabs">
                    <li><a href="#tab1" data-toggle="tab">Pay with Stripe</a></li>




        <li><a href="#tab2" data-toggle="tab">Pay with PayPal </a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="tab1">

Answer 1

我认为JS就像这样（需要jquery.cookie.js）：

$('a[data-toggle="tab"]').on('shown', function(e){

    //save the latest tab using a cookie:
    $.cookie('last_tab', $(e.target).attr('href'));

    });

    //activate latest tab, if it exists:
    var lastTab = $.cookie('last_tab');
    if (lastTab) {
        $('a[href=' + lastTab + ']').tab('show');
}

...和HTML代码：

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#pane1" data-toggle="tab"><i class="icon-wrench"></i>TAB 1</a></li>
    <li><a href="#pane2" data-toggle="tab"><i class="icon-warning-sign"></i>TAB 2</a></li>
    <li><a href="#pane3" data-toggle="tab"><i class="icon-resize-small"></i> TAB 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="pane1" class="tab-pane active">Content 1</div>
    <div id="pane2" class="tab-pane">Content 2</div>
    <div id="pane3" class="tab-pane">Content 3</div>

  </div>
</div>

DEMO - ＆gt; http://bootply.com/88234

Answer 2

您使用的是Bootstrap 3吗？如果是，则应使用“shown.bs.tab”事件而不是“show”

jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
      //save the latest tab using a cookie:
      jQuery.cookie('last_tab', jQuery(e.target).attr('href'));
    });

    //activate latest tab, if it exists:
    var lastTab = jQuery.cookie('last_tab');
    if (lastTab) {
        jQuery('ul.nav-tabs').children().removeClass('active');
        jQuery('a[href='+ lastTab +']').parents('li:first').addClass('active');
        jQuery('div.tab-content').children().removeClass('active');
        jQuery(lastTab).addClass('active');
    }

点击here了解详情

重新加载页面后，Bootstrap当前选项卡是否处于活动状态

2 个答案: