记住页面刷新时最后单击的选项卡

Question

一直试图让浏览器记住最后一个活动选项卡，但无法正确完成。

function ShowMyDiv(Obj){
  var elements = document.getElementsByTagName('div');
 for (var i = 0; i < elements.length; i++) 
  if(elements[i].className=='tabcontent')
   elements[i].style.display= 'none';

 document.getElementById(Obj.rel).style.display= 'block';
 //------------------------------------

  var ul_el = document.getElementById('mytab_ul');
  var li_el = ul_el.getElementsByTagName('li');
 for (var i = 0; i < li_el.length; i++) 
  li_el[i].className="";

 Obj.parentNode.className="selected";
}

JavaScript

<ul id="mytab_ul" class="mytabs">
    <li class="selected"><a rel="tab_data" href="#data" onclick="javascript:ShowMyDiv(this);">Data</a></li>
    <li class=""><a rel="tab_vtu" href="#vtu" onclick="javascript:ShowMyDiv(this);">Vtu</a></li>
    <li class=""><a rel="tab_cabletv" href="#ctv" onclick="javascript:ShowMyDiv(this);">CTv</a></li>
    <li class=""><a rel="tab_nepa" href="#npa" onclick="javascript:ShowMyDiv(this);">NPA</a></li>
    <li class=""><a rel="tab_exampin" href="#pin" onclick="javascript:ShowMyDiv(this);">Pin</a></li>
    <li class=""><a rel="tab_spectranet" href="#spectranet" onclick="javascript:ShowMyDiv(this);">Spectranet</a></li>
    <li class=""><a rel="tab_smile" href="#smile" onclick="javascript:ShowMyDiv(this);">Smile</a></li>
    <li class=""><a rel="tab_a2cash" href="#cash" onclick="javascript:ShowMyDiv(this);">Cash</a></li>
</ul>

HTML

请问我该怎么做？

我试过将它添加到我的 JS

var selectedTab =  window.location.href.split("#")[1] ;
    var selectedId = $('a[href$=' + selectedTab+']:first').attr('rel');

    if (typeof selectedId === "undefined") {
         $('#tab_data').trigger("click");
    }
    else{
        $('#'+selectedId).trigger("click");
    }

还是没用

Answer 1

要记住在 JavaScript 中刷新页面时最后单击的选项卡，您可以使用

localStorage

API。 首先，为您要跟踪的每个选项卡添加一个唯一标识符，

const tabs = document.querySelectorAll('li');
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    localStorage.setItem('lastClickedTab', tab.id);
  });
});

最后，在页面加载时，从

localStorage

中检索最后单击的选项卡的 ID 并设置其活动类：

window.addEventListener('load', () => {
  const lastClickedTab = localStorage.getItem('lastClickedTab');
  if (lastClickedTab) {
    const tab = document.getElementById(lastClickedTab);
    tab.classList.add('active');
  }
});

Answer 2

利用浏览器的本地存储怎么样？ 单击选项卡，您可以设置项目：

localstorage.setItem("activeTab", tabId)

在页面加载你可以得到项目

 localstorage.getItem("activeTab")

参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage