<style>
Ul,li{list-style:none;}
#nav {height:42px; border:1px solid #d3d3d3; background: #f7f7f7; border-radius:2px;box-shadow:1px 1px 2px Rgba (0,0,0,.2 );}
#nav li{float:left; height:42px; line-height:42px; padding:0 10px;
border-right:1px solid #d3d3d3; font-size:14px; Font-weight:bold}
#nav li.cur{background: #f1f1f1; border-top:1px solid #f60; Box-shadow:none}
#nav li A{text-decoration:none; display:block}
#nav li.cur a{color: #333}
#nav li A:hover{color: #f30}
#page {margin:20px Auto}
. List{display:none}
</style>
<div id= "NAV" >
<ul>
<li><a href= "#" >HTML/CSS</a></li>
<li><a href= "#" >Javascript/Ajax/jQuery</a></li>
<li><a href= "#" >PHP+MYSQL</a></li>
<li><a href= "#" > Front view </a></li>
<li><a href= "#" >html5/Mobile Web Apps </a></li>
</ul>
</div>
<div id= "Page" >
<div class= "List" >1</div>
<div class= "List" >2</div>
<div class= "List" >3</div>
<div class= "List" >4</div>
<div class= "List" >5</div>
</div>
<script>
var show = 0; Defining the default display is the first tab check state
if (window.localstorage) {//If the browser supports Localstorage
var navshow = Localstorage.getitem ("Shownum"); Get Client tab status
if (navshow==null) {//If empty, that is the first time it is opened
Sets the default first tab to a selected state and displays its corresponding list
$ ("#nav ul li"). EQ (show). addclass ("cur"). Siblings (). Removeclass ("cur");
$ (". List"). EQ (show). Show (). siblings (). Hide ();
}
$ ("#nav ul Li"). Each function (index) {//Traverse each tab
var li = $ (this);
Show = Li.attr ("cur") ==true?index:show; If the current tab is clicked, the show value is set to the current index value
if (index==navshow) {//If the current index value matches the Stored tab state value
Li.addclass ("cur"); Set to checked state style
$ (". List"). EQ (index). Show (). siblings (). Hide (); Display the corresponding list
}
Li.click (function () {//When you click the current tab
Li.addclass ("cur"). Siblings (). Removeclass ("cur");//set to checked state style
$ (". List"). EQ (index). Show (). siblings (). Hide (); Display the corresponding list
Localstorage.setitem ("Shownum", index); Stores the tab-selected state to a local
});
});
}else{//If the browser does not support Localstorage
Alert (' Your browser does not support localstorage. ');
}
</script>
HTML5 local Storage Application instance, after Refresh tab stays on point open page