Question

我需要一种方法来保持在同一个选项卡上，这是我的 HTML 代码：

<button class="tablink" onclick="openPage('Customers', this, 'orange')" <a href="#Customers" data-toggle="pill">Customers</a></button>
<button class="tablink" onclick="openPage('Online', this, 'orange')" <a href="#Online" data-toggle="pill">Online Sessions</a></button>
<button class="tablink" onclick="openPage('History', this, 'orange')" <a href="#History" data-toggle="pill">Historical Sessions</a></button>
<div id="Customers" class="tabcontent">

我尝试了几种方法来做到这一点，但它们都不起作用，这是其中之一：

jQuery(document).ready(function() {
  jQuery('a[data-toggle="pill"]').on('show.bs.tab', function(e) {
    localStorage.setItem('activeTab', jQuery(e.target).attr('href'));
  });
  var activeTab = localStorage.getItem('activeTab');
  console.log(activeTab);
  if (activeTab) {
    jQuery('a[href="' + activeTab + '"]').tab('show');
  }
});
setTimeout(function() {
  location.reload();
}, 10000);
if (location.hash != '') {
  openPage('Settings', this, 'orange');
}
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

每当网站刷新时，它都会变回空白（未选择标签）并且不会停留在最后选择的标签上。也试过 data-toggle="tab" 和相同的结果

页面刷新后 HTML 保持在同一选项卡上

0 个答案: