使用jQuery WITHOUT cookie后（刷新、提交或跳转菜单）如何保留当前选项卡。因为我的大多数朋友（他们是我的客户）在他们的终端上禁用cookie。假设jQuery已经下载。我的网站使用php、javascript、html、sql和jQuery。一个清晰的解释和一个简单的例子在不使用服务器脚本的情况下非常受欢迎。还有一件事，请不要提供链接作为答案。我已经浏览了几天的互联网，大多数例子都是中级和高级的。大多数示例都不是从头开始的，也没有更多地强调选项卡。tq。
sessionStorage&localStorage非常适合在未启用cookie的情况下解决此类问题。它们非常容易使用，这也是为什么作为一名开发人员，你无法理解如何实现这样的系统。下面的代码非常基本，没有涉及jQuery ~ jQuery中可能内置了一些非常容易使用的方法，但我不知道。
<form action="#">
<h1>Tabs & sessionStorage</h1>
<div id='tabs'>
<div id='t1'>tab 1</div>
<div id='t2'>tab 2</div>
<div id='t3'>tab 3</div>
<div id='t4'>tab 4</div>
</div>
</form>
<script type='text/javascript'>
/* The name of the storage Item */
var store='tabs';
/* a class name used to identify active tab */
var cn='active';
/* current value of the storage item, if any */
var cval=sessionStorage.getItem( store );
/* A nodelist of tabs within container */
var col=document.querySelectorAll('div#tabs > div');
/* Iterate through nodelist */
for( var n in col )if( col[n].nodeType==1 ){
/* assign click event handler */
col[ n ].onclick=function(event){
/* get reference to current node ( tab ) */
var el=typeof( event.target )!='undefined' ? event.target : event.srcElement;
/* set the value into storage item */
sessionStorage.setItem( store, el.id );
/* assign class to active and remove from inactive nodes */
for( var m in col ){
if( col[m].nodeType==1 ){
if( col[m].id==el.id )col[m].classList.add( cn );
else col[m].classList.remove( cn );
}
}
}
/* on load, assign active class to the correct tab */
if( cval!=null && cval==col[n].id ) col[n].classList.add( cn );
}
</script>
一个你需要调整和改进的粗略演示（相同的javascript）-应该注意的是，form并不重要~它只是为了我的目的，所以你可以从html中省略它并更改css。对你来说，重要的是要了解如何根据事件从sessionStorage中存储和检索项目——给出的html非常粗糙和现成——因为你发布的代码绝对没有人能指导你布局——希望这能让你开始。
<style>
form > #tabs{
width:80%;
height:180px;
display:block;
margin:0 auto;
float:none;
box-sizing:content-box;
padding:1rem;
border:1px solid black;
}
form > #tabs > div{
width:20%;
margin:0;
float:left;
clear:none;
background:whitesmoke;
text-align:center;
box-sizing:content-box;
border:1px solid black;
cursor:pointer;
}
form > #tabs > div:before{
display:block;
content:attr(data-title);
}
form > #tabs > div:hover{
background:#39F;
color:white;
}
form > #tabs > div.active{
background:#9F0;
border-left:none;
border-bottom:none;
border-right:none;
}
form > #tabs > div:first-of-type.active{
border-left:1px solid black;
}
form > #tabs > div:last-of-type.active{
border-right:1px solid black;
}
form > #tabs > div section{
display:none;
height:130px;
width:600px;
z-index:2;
top:50px;
text-align:left;
padding:1rem;
}
form > #tabs > div.active section{
display:block;
background:white;
color:black;
border:1px solid black;
}
</style>
<form action="#">
<h1>Tabs & sessionStorage</h1>
<div id='tabs'>
<div id='t1' data-title='Tab 1'>
<section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
</div>
<div id='t2' data-title='Tab 2'>
<section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
</div>
<div id='t3' data-title='Tab 3'>
<section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
</div>
<div id='t4' data-title='Tab 4'>
<section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
</div>
</div>
</form>