如何显示和隐藏一个DIV内容，并记录于cookies？

本帖最后由 gfhjtfju547 于 2011-03-10 13:33:29 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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=gb2312" />
<style type="text/css">
.box{width: 250px; height: 210px;font-size: 13px;}
.kai{height: 20px; width: 30px; float: left; border: 1px solid #000066; }
.guan{height: 20px; width: 30px; float: right; border: 1px solid #FF0000;}
.neirong{clear: left; float: left; height: 110px; width: 248px; margin-top: 50px; border: 1px solid #000000;}
</style>
<script type="text/javascript">
function popen(){
document.getElementById("open").style.display="none";
document.getElementById("close").style.display="";
document.getElementById("content").style.display="";
document.cookie="state=open";
}
function pclose(){
document.getElementById("open").style.display="";
document.getElementById("close").style.display="none";
document.getElementById("content").style.display="none";
document.cookie="state=close";
}
</script>
</head>
<body>
<div class="box">
<div id="open" onclick="popen()" class="kai">开启</div>
<div id="close" onclick="pclose()" class="guan">关闭</div>
<div id="content" class="neirong">内容...</div>
</div>
<button onclick="alert(document.cookie);">看cookie</button>
</body></html>
好象没有记录于COOkie呢，重新打开页面，并没有记录最后一次的操作..
1#的代码是可以的，查看COOKIE也没有问题，IE和其他主流浏览器我都测试了！记录最后的一次的操作，你看COOKIE警告的是OPEN还是CLOSE不就知道最后一次的操作了！
还有个问题就是如果先点开启，，结果开启的DIV隐藏了。
<!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=gb2312" />
<style type="text/css">
.box{width: 250px; height: 210px;font-size: 13px;}
.kai{height: 20px; width: 30px; float: left; border: 1px solid #000066; }
.guan{height: 20px; width: 30px; float: right; border: 1px solid #FF0000;}
.neirong{clear: left; float: left; height: 110px; width: 248px; margin-top: 50px; border: 1px solid #000000;}
</style>
<script type="text/javascript">
window.onload=function(){
if(getCookie("state")=="open"){
popen();
}else if(getCookie("state")=="close"){
pclose();
}
}
function popen(){
document.getElementById("open").style.display="none";
document.getElementById("close").style.display="";
document.getElementById("content").style.display="";
SetCookie("state","open");
}
function pclose(){
document.getElementById("open").style.display="";
document.getElementById("close").style.display="none";
document.getElementById("content").style.display="none";
SetCookie("state","close");
}
function SetCookie(name,value)//两个参数，一个是cookie的名子，一个是值
{
    var Days = 30; //此 cookie 将被保存 30 天
    var exp  = new Date();    //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)//取cookies函数
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;}
</script>
</head>
<body>
<div class="box">
<div id="open" onclick="popen()" class="kai">开启</div>
<div id="close" onclick="pclose()" class="guan">关闭</div>
<div id="content" class="neirong">内容...</div>
</div>
<button onclick="alert(document.cookie);">看cookie</button>
</body></html>
然后点“开启”能显示“内容”和“关闭”的DIV块，，并隐藏“开启”DIV块，同样需记录于cookies。
====================================
点开启隐藏开启的div这不是你的需求么？
最终版
<!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=gb2312" />
<style type="text/css">
.box{width: 250px; height: 210px;font-size: 13px;}
.kai{height: 20px; width: 30px; float: left; border: 1px solid #000066; }
.guan{height: 20px; width: 30px; float: right; border: 1px solid #FF0000;}
.neirong{clear: left; float: left; height: 110px; width: 248px; margin-top: 50px; border: 1px solid #000000;}
</style>
<script type="text/javascript">
window.onload=function(){
if(getCookie("state")=="open"){
popen();
}else if(getCookie("state")=="close"){
pclose();
}
}
function popen(){
if(!getCookie("state")=="close"){
return;
}
document.getElementById("open").style.display="none";
document.getElementById("close").style.display="";
document.getElementById("content").style.display="";
SetCookie("state","open");
}
function pclose(){
document.getElementById("open").style.display="";
document.getElementById("close").style.display="none";
document.getElementById("content").style.display="none";
SetCookie("state","close");
}
function SetCookie(name,value)//两个参数，一个是cookie的名子，一个是值
{
    var Days = 30; //此 cookie 将被保存 30 天
    var exp  = new Date();    //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)//取cookies函数
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;}
</script>
</head>
<body>
<div class="box">
<div id="open" onclick="popen()" class="kai">开启</div>
<div id="close" onclick="pclose()" class="guan">关闭</div>
<div id="content" class="neirong">内容...</div>
</div>
<button onclick="alert(document.cookie);">看cookie</button>
</body></html>
如果到第一步去，在没有任何改变的情况下我想点他没有任何变化，而只有在关闭内容后点他才然后点“开启”能显示“内容”和“关闭”的DIV块，并隐藏“开启”DIV块。
其实这个功能思路是简单的，就是代码比较罗嗦，刚没事写着玩了一个！<!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=gb2312" />
<style type="text/css">
.box{width: 250px; height: 210px;font-size: 13px;}
.kai{height: 20px; width: 30px; float: left; border: 1px solid #000066; }
.guan{height: 20px; width: 30px; float: right; border: 1px solid #FF0000;}
.neirong{clear: left; float: left; height: 110px; width: 248px; margin-top: 50px; border: 1px solid #000000;}
</style>
<script type="text/javascript">
function getcookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    }
  }
return ""
}
function setcookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}window.onload=function(){
document.getElementById("state").innerHTML="当前cookie操作状态为:"+getcookie("state");
if(getcookie("state")=='open')
{popen();}
else
{pclose();}
}
function popen(){
    document.getElementById("open").style.display="none";
    document.getElementById("close").style.display="block";
    document.getElementById("content").style.display="block";
    setcookie('state','open',365);
}
function pclose(){
    document.getElementById("open").style.display="block";
    document.getElementById("close").style.display="none";
    document.getElementById("content").style.display="none";
     setcookie('state','close',365);
}
</script>
</head>
<body>
<div class="box">
<div id="open" onclick="popen()" class="kai">开启</div>
<div id="close" onclick="pclose()" class="guan">关闭</div>
<div id="content" class="neirong">内容...</div>
</div>
<div id="state" style="color:red"></div>
<button onclick="alert(document.cookie);">看cookie</button>
</body></html>
好吧这个应该行了吧
<!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=gb2312" />
<style type="text/css">
.box{width: 250px; height: 210px;font-size: 13px;}
.kai{height: 20px; width: 30px; float: left; border: 1px solid #000066; }
.guan{height: 20px; width: 30px; float: right; border: 1px solid #FF0000;}
.neirong{clear: left; float: left; height: 110px; width: 248px; margin-top: 50px; border: 1px solid #000000;}
</style>
<script type="text/javascript">
window.onload=function(){
if(getCookie("state")=="open"){
popen();
}else if(getCookie("state")=="close"){
pclose();
}
}
function popen(){
if(!(getCookie("state")=="close")){
return;
}
document.getElementById("open").style.display="none";
document.getElementById("close").style.display="";
document.getElementById("content").style.display="";
SetCookie("state","open");
}
function pclose(){
document.getElementById("open").style.display="";
document.getElementById("close").style.display="none";
document.getElementById("content").style.display="none";
SetCookie("state","close");
}
function SetCookie(name,value)//两个参数，一个是cookie的名子，一个是值
{
    var Days = 30; //此 cookie 将被保存 30 天
    var exp  = new Date();    //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)//取cookies函数
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;}
function delCookie(name)//删除cookie
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
</script>
</head>
<body>
<div class="box">
<div id="open" onclick="popen()" class="kai">开启</div>
<div id="close" onclick="pclose()" class="guan">关闭</div>
<div id="content" class="neirong">内容...</div>
</div>
<button onclick="alert(document.cookie);">看cookie</button>
<button onclick="delCookie('state')">清空cookie</button>
</body></html>