javascript - 刷新后保存当前事件选项卡

Question

我有更改事件类别并在其下应用地下风格的菜单:

我的代码片段:

(function() {
  var tabs = document.getElementsByClassName('tab');

  for (i = 0; i < tabs.length; i++) {

    tabs[i].addEventListener('click', function(e) {
      removeActive();
      e.target.classList.add('active');
    })
  }
})();


function removeActive() {
  var tabs = document.getElementsByClassName('tab');
  for (i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active')
  }
}

 .myTabs {
   border: 1px solid #797979;
   background: #ffffff;
   background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
   background: -webkit-linear-gradient(top, #ffffff 0%, #d6d6d6 100%);
   background: linear-gradient(to bottom, #ffffff 0%, #d6d6d6 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6', GradientType=0);
 }

 .myTabs a {
   color: #000000;
   border-left: 1px solid #797979;
   display: block;
   padding: 5px 10px;
   float: right;
   text-decoration: none;
 }

 .myTabs a:hover {
   background: #ffffff;
   background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
   background: -webkit-linear-gradient(top, #d6d6d6 0%, #ffffff 100%);
   background: linear-gradient(to bottom, #d6d6d6 0%, #ffffff 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff', GradientType=0);
   text-decoration: none;
 }

 .myTabs a:active,
 .myTabs a:visited {
   text-decoration: none;
 }

 .myTabs a.active {
   /*box-shadow: 0px 5px 0px grey;*/
   background: #ffffff;
   background: -moz-linear-gradient(top, #c3c3c3 0%, #ffffff 100%);
   background: -webkit-linear-gradient(top, #c3c3c3 0%, #ffffff 100%);
   background: linear-gradient(to bottom, #c3c3c3 0%, #ffffff 100%);
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#c3c3c3', endColorstr='#ffffff', GradientType=0);
   text-decoration: none;
 }

 <div class="myTabs">
         <div style="float:left; margin:5px;">
           Load
          </div>
           <a href="#bonos" class="tab" aria-controls="bonos" role="tab" data-toggle="tab">tab3<a>
           <a href="#empleados" class="tab" aria-controls="empleados" role="tab" data-toggle="tab">tab2</a>
           <a href="#puestos" class="active tab" aria-controls="puestos" role="tab" data-toggle="tab">tab1</a>
                        <div style="clear:both;"></div>
                    </div>

我想要实现的目标是，例如，如果我当前的选项卡是“Tab3”并且我刷新页面。继续使用 Tab3，而不是刷新全部并再次返回 Tab1。

我需要做什么才能实现这个目标？问候

Answer 1

有两种不同的方式，一种是cookie，另一种是localstorage。对于这样的事情，我会使用 localstorage，这样您就不会根据请求发送 activetab。但是，某些浏览器/计算机不支持 localStorage，因此您可以使用上面的 cookie 代码。

下面是 localStorage 的 JS Fiddle，它也保存事件选项卡。

有任何问题请随时提问。

JSFiddle - LocalStorage

这是部分代码:

if (typeof(Storage) !== "undefined") {
   if (localStorage.lastTab == undefined) localStorage.setItem("lastTab",0);
   var i = localStorage.lastTab;
   $('.fakeTabs > li').removeClass('active').eq(i).addClass('active');
} else {
   // This will not save an active tab unless you use cookies but why waste the space.
}