0

2 つのタブがあります。2 番目のタブを送信しようとすると、必須フィールドがチェックされ、エラー メッセージが表示されます。しかし、ページをリロードすると、最初のタブが表示されます。スタックフローでいくつかのスレッドを見て実装しましたが、同じ問題に直面しています。

これは私のコードです

$(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 を使用していますか? はいの場合、「show」の代わりに「shown.bs.tab」イベントを使用する必要があります

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 に答える