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哈希创建可共享链接。

Answer 2

这是你可以做到的一种方式。显然，由于片段在stackoverflow.com上，并且哈希不会被附加到URL，因此这不太有效。我在本地进行了测试，但它确实有效。

注意： 这仅在您刷新页面或使用引用要打开的选项卡的特定URL时才有效。如果你想要它＆＃34;记住＆＃34;关闭浏览器/选项卡后的选项卡或其他任何内容，如果您正在处理客户端会话，最好使用cookie或将其存储在数据库中。

＆＃13;

//When the page loads, get the current # value and mark the li as "active" if the href attribute matches.
$(document).ready(function() {
  var v = "#" + window.location.hash.substr(1);
  $("#myTab li").each(function() {
    var href = $(this).children().first().attr("href");
    if (href == v) $(this).addClass("active");
    else $(this).removeClass("active");
  });
});

//Whenever we click on a li, remove all "active" classes and finally add "active" to the one we clicked.
$("#myTab li").on("click", function() {
  $("#myTab li").each(function() {
    $(this).removeClass("active");
  });
  $(this).addClass("active");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" id="myTab">
  <li><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

＆＃13;

Answer 3

如果要为刷新后保存值，可以使用cookie或sessionStorage（如评论中所述）。我认为sessionStorage越容易。

$('.tab-pane').click(function(){
   sessionStorage.setItem("clicked", $(this).attr('id'));
});

页面刷新后，您可以检索保存的值：

 if(sessionStorage.getItem("clicked") != null)
     var clickeId = sessionStorage.getItem("clicked")

Answer 4

这是多个标签的示例：

    $('a[data-toggle="tab"]').on('click', function (e) {

    var theTabId = $(this).attr('href');
    var activeTabs = (window.localStorage.getItem('activeTab') ? window.localStorage.getItem('activeTab').split(',') : []);

    var $sameLevelTabs = $(e.target).parents('.nav-tabs').find('[data-toggle="tab"]');

    $.each($sameLevelTabs, function (index, element) {
        var tabId = $(element).attr('href');
        if(theTabId != tabId && activeTabs.indexOf(tabId) !== -1){
            activeTabs.splice(activeTabs.indexOf(tabId), 1);
        }
    });

    //unique tabs
    if (activeTabs.indexOf($(e.target).attr('href')) === -1) {
        activeTabs.push($(e.target).attr('href'));
    }

    window.localStorage.setItem('activeTab', activeTabs.join(','));

});

var activeTabs = window.localStorage.getItem('activeTab');
if (activeTabs) {
    var activeTabs = (window.localStorage.getItem('activeTab') ? window.localStorage.getItem('activeTab').split(',') : []);
    $.each(activeTabs, function (index, element) {
        $('[data-toggle="tab"][href="' + element + '"]').tab('show');
    });
}

Answer 5

我使用本地存储来存储 active-tab-id，它对我有用。

 $('a[data-toggle="tab"]').on("click", function(e) { 
   localStorage.setItem("active-tab-id", $(e.target).attr("href"));
 });

var activeTabId = localStorage.getItem("active-tab-id");
var activeTab = $(`a[href="${activeTabId}"]`);

if(activeTab.length == 1)
  activeTab.tab("show");
else
  $('a[data-toggle="tab"]')[0].click();

如果您的标签未激活，默认情况下它会点击第一个标签。

Bootstrap 4记住标签

5 个答案: