Question

通过单击按钮提交表单，在页面重新加载时应打开相同的选项卡，但它将转到默认选项卡。我尝试了本地存储，但它不起作用。我的代码出了什么问题？

[现在正在运作。请参阅下面的答案]

jQuery的：

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

Answer 1

要解决一些问题。 .tab('show')应为.show('tab')

我将show.bs.tab更改为click。

我启动了两个div display:none。

最后，我放了一个onload函数来显示应该显示的div。

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

Answer 2

这让我工作：

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

表单提交应保留在同一选项卡上

2 个答案: