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代码。

下面是一个JSFiddle of localStorage，它还保存了活动标签。

任何问题随时可以提出。

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.
}

Answer 2

我建议使用document.cookies在刷新后保存数据：

How to use

更新活动标签时

document.cookie = “activeTab=“ + activeTab

当页面加载时尝试检索此数据：

var activeTab = document.cookie.split(“=“);
if(activeTab.length == 2) {
    activeTab = activeTab[1]:
} else {
    activeTab = “1”;
}

祝你好运！

刷新后保存当前活动选项卡

2 个答案: