javascript - Bootstrap 4 记住选项卡

Question

当刷新或重新访问页面时，如何让浏览器记住用户正在查看的选项卡？

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
   <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>

轮廓 讯息 设置

<div class="tab-content">
   <div class="tab-pane active" id="home" role="tabpanel">...</div>
   <div class="tab-pane" id="profile" role="tabpanel">...</div>
   <div class="tab-pane" id="messages" role="tabpanel">...</div>
   <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

Answer 1

这对我有用..

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var hash = $(e.target).attr('href');
  if (history.pushState) {
    history.pushState(null, null, hash);
  } else {
    location.hash = hash;
  }
});

var hash = window.location.hash;
if (hash) {
  $('.nav-link[href="' + hash + '"]').tab('show');
}

使用 URL 哈希创建可共享链接。