0

我有两个标签。当我尝试提交第二个选项卡时，它会检查一些必填字段并显示错误消息。但是当页面重新加载时，它会显示第一个选项卡。我在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">

4

2 回答 2

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>

演示--> http://bootply.com/88234

于 2013-10-16T13:24:10.230 回答
0

你在使用 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');
    }

点击这里了解更多详情

于 2014-02-11T13:19:21.523 回答