Form submit should stay on the same tab

后端未结

关注

 2  1500

On submitting the form by clicking a button, upon page reload same tab should be opened, but it is going to default tab. I have tried local storage but it doesn

相关标签:

2条回答

北恋

2021-01-28 18:30

This got me working:

$(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();
            });
});

0 讨论(0)

-上瘾入骨i

2021-01-28 18:35

Couple things to fix. .tab('show') should be .show('tab')

I changed the show.bs.tab to click.

I made both divs display:none to start.

And finally, I put an onload function to show the div that should be shown.

<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>

0 讨论(0)