怎么保持刷新页面后不回到初始状态！
日期：2014-05-16 浏览次数：20434 次
如何保持刷新页面后不回到初始状态！！
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {padding:0;margin:0;text-align:center;color:#666;font-size:12px;font-family:tahoma,arial,sans-serif;}
h1, h2, h3, h4, h5, h6, form, div, p, i, img, ul, li, ol, table, tr, td,th, fieldset, label, legend,button,input { margin:0;padding:0;}
li{list-style:none;}
a img{border:none;}
a:link{text-decoration:none;color:#07519A;}
a:visited{text-decoration:none;color:#07519A;}
a:active,a:hover{text-decoration:underline;color:#07519A;}
.tarea0{float:left;height:220px;width:242px;}
.tarea{border:1px solid #ace;float:left;height:156px;text-align:center;width:242px;}
.tarea1{border:1px solid #ace;float:left;height:251px;text-align:center;width:242px;}
.tarea2{border:1px solid #ace;float:left;height:217px;text-align:center;width:243px;}
ul.tbtn li{background:#EBF3FB;border:1px solid #ace;border-left:none;border-top:none;color:#07519A;cursor:pointer;display:block;float:left;height:25px;line-height:25px;text-align:center;text-decoration:none;width:60px;background:url(http://img5.cn.msn.com/images/msfp_015.gif) repeat-x;}
ul.tbtn li:hover{text-decoration:underline;}
ul.tbtn li.curr{background:#fff;border-bottom-color:#fff;cursor:default;color:#666;}
.tbcon{margin:8px 0px 6px 8px;text-align:left;}
</style>
<script language="javascript" type="text/javascript">
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};
</script>
</head>
<body>
<div class="tarea2" style="height:223px;">
<ul class="tbtn"><li onclick="tabit(this)" id="tabap1_btn_0" class="curr">理财大学</li><li onclick="tabit(this)" id="tabap1_btn_1">名医讲堂</li><li onclick="tabit(this)" id="tabap1_btn_2">热搜榜</li><li style="border-right:none;" onclick="tabit(this)" id="tabap1_btn_3">热搜榜</li></ul>
<div class="clr"></div>
<div class="tbcon" id="tabap1_div_0">内容0
</div>
<div style="display: none;" class="tbcon" id="tabap1_div_1">内容1
</div>
<div style="display: none;" class="tbcon" id="tabap1_div_2">内容2
</div>
<div style="display: none;" class="tbcon" id="tabap1_div_3">内容3
</div>
</div>
</body>
</html>
------解决方案--------------------
把内容存储起来。用cookies存储吧。怎么使用cookies么，网上搜搜，很多
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {padding:0;margin:0;text-align:center;color:#666;font-size:12px;font-family:tahoma,arial,sans-serif;}
h1, h2, h3, h4, h5, h6, form, div, p, i, img, ul, li, ol, table, tr, td,th, fieldset, label, legend,button,input { margin:0;padding:0;}
li{list-style:none;}
a img{border:none;}
a:link{text-decoration:none;color:#07519A;}
a:visited{text-decoration:none;color:#07519A;}
a:active,a:hover{text-decoration:underline;color:#07519A;}
.tarea0{float:left;height:220px;width:242px;}
.tarea{border:1px solid #ace;float:left;height:156px;text-align:center;width:242px;}
.tarea1{border:1px solid #ace;float:left;height:251px;text-align:center;width:242px;}
.tarea2{border:1px solid #ace;float:left;height:217px;text-align:center;width:243px;}
ul.tbtn li{background:#EBF3FB;border:1px solid #ace;border-left:none;border-top:none;color:#07519A;cursor:pointer;display:block;float:left;height:25px;line-height:25px;text-align:center;text-decoration:none;width:60px;background:url(http://img5.cn.msn.com/images/msfp_015.gif) repeat-x;}
ul.tbtn li:hover{text-decoration:underline;}
ul.tbtn li.curr{background:#fff;border-bottom-color:#fff;cursor:default;color:#666;}
.tbcon{margin:8px 0px 6px 8px;text-align:left;}
</style>
<script language="javascript" type="text/javascript">
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(i=0;i<tabNumber;i++){
document.getElementById(tabName+"_div_"+i).style.display = "none";
document.getElementById(tabName+"_btn_"+i).className = "";
};
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "curr";
};
</script>
</head>
<body>
<div class="tarea2" style="height:223px;">
<ul class="tbtn"><li onclick="tabit(this)" id="tabap1_btn_0" class="curr">理财大学</li><li onclick="tabit(this)" id="tabap1_btn_1">名医讲堂</li><li onclick="tabit(this)" id="tabap1_btn_2">热搜榜</li><li style="border-right:none;" onclick="tabit(this)" id="tabap1_btn_3">热搜榜</li></ul>
<div class="clr"></div>
<div class="tbcon" id="tabap1_div_0">内容0
</div>
<div style="display: none;" class="tbcon" id="tabap1_div_1">内容1
</div>
<div style="display: none;" class="tbcon" id="tabap1_div_2">内容2
</div>
<div style="display: none;" class="tbcon" id="tabap1_div_3">内容3
</div>
</div>
</body>
</html>
------解决方案--------------------
把内容存储起来。用cookies存储吧。怎么使用cookies么，网上搜搜，很多
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
