Question

我正在尝试在刷新页面后显示profile选项卡处于活动状态。但是在页面加载之前选项卡处于活动状态，之后没有激活。

但是我在activeTab之后调用location.reload()函数。有什么建议吗？

$(document).on('click', '#Generate', function(e) {
  alert('hello');
  setTimeout(function() {
    window.setTimeout(function() {
      location.reload();
    }, 500);
    activeTab('profile');
  }, 2000);

});


function activeTab(tabID) {
  $('.nav-tabs a[href="#' + tabID + '"]').tab('show');
};

<button id="Generate">
      Click
    </button>
<p>
  &nbsp;
</p>
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="profile">Profile</div>
</div>

Answer 1

您可以使用解决方案https://jsfiddle.net/0erervmb/

activeTab = function(tabID) {
  $('#myTab ul li a[href="#' + tabID + '"]').click();
}

$(document).on('click', '#Generate', function(e) {
  setTimeout(function() {
    window.setTimeout(function() {
      location.reload();
    }, 500);
    localStorage.setItem('activeTab', 'profile');
    activeTab('profile');
  }, 2000);

});

$('#myTab').tabs();

if( localStorage.getItem('activeTab') != null){
	activeTab(localStorage.getItem('activeTab'));
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="Generate">
      Click
    </button>
<p>
  &nbsp;
</p>
<div id="myTab">
  <ul>
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="home">Home</div>
    <div class="tab-pane" id="profile">Profile</div>
  </div>
</div>

需要注意的要点

我稍微修改了HTML。
请添加$('#myTab').tabs();
重新加载后，将localStorage用于上次激活的标签页。

第二次更新https://jsfiddle.net/0erervmb/1/

$(document).on('click', '#Generate', function(e) {
  setTimeout(function() {
    window.setTimeout(function() {
      location.reload();
    }, 500);
    localStorage.setItem('activeTab', 'profile');
  }, 2000);

});

只需删除activeTab('profile');

即可

希望这会对你有所帮助。

刷新页面后，选项卡未激活 - jquery

1 个答案: