フォーム提出は同じタブにとどまるべきである

ボタンをクリックしてフォームを送信すると、ページの再読み込み時に同じタブが開きますが、デフォルトタブになります。私はローカルストレージを試しましたが、動作しません。私のコードで何が間違っていますか？フォーム提出は同じタブにとどまるべきである

[これで動作します。

が

$(document).ready(function() { 
      $('a[data-toggle="tab"]').on('show.bs.tab', function(e) { 
      localStorage.setItem('activeTab', $(e.target).attr('href')); 
      }); 
      var activeTab = localStorage.getItem('activeTab'); 
      if(activeTab){ 
      $('#myTab a[href="' + activeTab + '"]').tab('show'); 
      } 
$('.tabs .tab-links a').on('click', function(e) { 
      var currentAttrValue = jQuery(this).attr('href'); 
      // Show/Hide Tabs 
      jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400); 
      jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400); 
      // Change/remove current tab to active 
      jQuery(this).parent('li').addClass('active').siblings().removeClass('active');  
      e.preventDefault(); 
      }); 
$('#btnLock').click(function() { 
      $('#lockForm').submit(); 
      }); 
});

HTML：：

<div class="tabs" align="center"> 
    <ul class="tab-links"> 
    <li class="active"><a data-toggle="tab" href="#tabs-1">Register</a></li> 
    <li><a data-toggle="tab" href="#tabs-2">Lock</a></li> 
    </ul> 
<div class="tab-content"> 
    <div id="tabs-1" class="tab active"> 
     <form:form....> <div class="plinput"><a id="btnRegister" class="abutton">Register</a></div> 
     </form:form> 
    </div> 
    <div id="tabs-2" class="tab"> 
     <form:form...> <div class="plinput"><a id="btnLock" class="abutton">Lock</a></div> 
     </form:form> 
    </div> 
</div>

出典

2016-05-27 Full Stack Developer - Java

デバッグ： '場合（activeTab）{ $（ '＃Myタブを[のhref = "' + activeTab + '"]'）タブ（ 'show'）; } 'はアクティブタブが定義されており、それにはあなたが期待するものが含まれています。 –

まず、ブラウザがlocalStorageとsessionStorageをサポートしていますか？これはアクションコードサーバーで制御する必要がありますか、PHPやjavaなどの言語を使用していますか？サーバーサイドで変数をコード化してhtmlに渡す必要があります –

私たちから与えられたコードから、 'localStorage.setItem（ 'activeTab'、$（e.target）.attr（ 'href'））;'でなければなりません。 'show.bs.tab'イベントとは何ですか？ –

カップルの事を修正するには、以下の私の答え]

のjQueryを参照してください。 .tab('show')は

に変更されました。

私はdivを両方ともdisplay:noneにしました。

最後に、表示するdivを表示するonload関数を追加しました。

<head> 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="" crossorigin="anonymous"></script> 
</head> 
<body> 

    <script> 
    $(document).ready(function() { 
     $('a[data-toggle="tab"]').on('click', function (e) { 
     localStorage.setItem('activeTab', $(e.target).attr('href')); 
     }); 

     var activeTab = localStorage.getItem('activeTab'); 

     if (activeTab) { 
     $('#myTab a[href="' + activeTab + '"]').show('tab'); 
     } 

     $('.tabs .tab-links a').on('click', function (e) { 
     var currentAttrValue = jQuery(this).attr('href'); 
     // Show/Hide Tabs 
     jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400); 
     jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400); 
     // Change/remove current tab to active 
     jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
     e.preventDefault(); 
     }); 
     $('#btnLock').click(function() { 
     $('#lockForm').submit(); 
     }); 
     $(window).on('load',function() { 
     $(localStorage.getItem('activeTab')).show(); 
     }); 
    }); 

    </script> 
    <div class="tabs" align="center"> 
    <ul class="tab-links"> 
     <li class="active"><a data-toggle="tab" href="#tabs-1">Register</a></li> 
     <li><a data-toggle="tab" href="#tabs-2">Lock</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="tabs-1" class="tab active" style="border: 1px solid blue;display:none;"> 
     <form:form> 
      <div class="plinput"><a id="btnRegister" class="abutton">Register</a></div> 
     </form:form> 
     </div> 
     <div id="tabs-2" class="tab" style="border: 1px solid red;display:none;"> 
     <form:form> 
      <div class="plinput"><a id="btnLock" class="abutton">Lock</a></div> 
     </form:form> 
     </div> 
    </div> 
    </div> 
</body> 
<a href="../login.aspx">Somewhere Else</a>

出典

2016-05-27 21:47:09

これは私が働いてしまった：ここ

$(document).ready(function() { 
     var activeTab = localStorage.getItem('activeTab'); 
     if(activeTab){ 
     $('.tab-links a[href="' + activeTab + '"]').tab('show'); 
     } 
$('.tabs .tab-links a').on('click', function(e) { 
      var currentAttrValue = jQuery(this).attr('href'); 
      localStorage.setItem('activeTab', currentAttrValue); 
      jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400); 
      jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400); 
      jQuery(this).parent('li').addClass('active').siblings().removeClass('active');  
      e.preventDefault(); 
      }); 
});

出典

2016-05-27 22:42:22

フォーム提出は同じタブにとどまるべきである

答えて

関連する問題