用jquery实现层(div)关闭后刷新页面也不显示

想实现一个效果:

点击关闭一个div按钮之后,刷新页面也不会再显示。

搜索了一下google于是有用js代码写的。

曾经以为cookie很难,很神秘,现在有了解了!!

代码如下:

用javascript实现层(div)关闭后刷新页面也不显示:
实现方法:
使用cookie,当用户点击关闭按钮后,会设置相应cookie标记,当在刷新页面的时候检查cookie是否有值,如果有不显示.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>用javascript实现层(div)关闭后刷新页面也不显示</title>
<style type=”text/css”>
#myDiv{
border:1px solid red;
background:#cccccc;
width:100px;
height:100px;
}
#mySpan{
cursor:pointer;
}
</style>
<script language=”JavaScript” type=”text/javascript”>
function closeDiv(){
document.getElementById(“myDiv”).style.display = “none”;
document.cookie = “isClose”;
}
window.onload = function(){
var arrStr = document.cookie;
if(arrStr.indexOf(“isClose”) > -1){
closeDiv();
}
}
</script>
</head>
<body>
<div id=”myDiv”><span onclick=”closeDiv()” id=”mySpan”>关闭层</span></div>
</body>
</html>

我测试发现,不行??我也不知道咋地。后来我就想用jquery实现,于是我再搜jquery cookie

 

于是就发明了现在我用的

代码如下:

 

 

 

 
[code lang=”js”]
<script>
jQuery.cookie = function(name, value, options) {
if (typeof value != ‘undefined’) {
options = options || {};
if (value === null) {
value = ”;
options = $.extend({}, options);
options.expires = -1;
}
var expires = ”;
if (options.expires && (typeof options.expires == ‘number’ || options.expires.toUTCString)) {
var date;
if (typeof options.expires == ‘number’) {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));//day * 24hour 60min 60sc 1000haomiao
} else {
date = options.expires;
}
expires = ‘; expires=’ + date.toUTCString();
}
var path = options.path ? ‘; path=’ + (options.path) : ”;
var domain = options.domain ? ‘; domain=’ + (options.domain) : ”;
var secure = options.secure ? ‘; secure’ : ”;
document.cookie = [name, ‘=’, encodeURIComponent(value), expires, path, domain, secure].join(”);
} else {
var cookieValue = null;
if (document.cookie && document.cookie != ”) {
var cookies = document.cookie.split(‘;’);
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + ‘=’)) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
var pa=jQuery.noConflict();
pa(document).ready(function(){
var panda =pa(".bottomimg");
panda.children("span").click(function(){
panda.fadeOut(600);
pa.cookie(‘closediv’,’close’,{ expires: 1});
});
var hc = pa.cookie(‘closediv’);
if(hc=="close")
{panda.hide()
}else{panda.show()}
});
</script>
[/code]

这是一个jquery插件。我只是自己运用一下而已。我用了一个判断语句

首先点击的时候关闭窗口 ,然后记录cookie 记录cookie 名称为 closediv 值为close 时间为一天

然后判断cookie是否有值==close

然后做相应操作。

有值则隐藏,无值则显示。

然后就ok了。

最后介绍一下操作。

jQuery操作cookie的插件,大概的使用方法如下
$.cookie(‘the_cookie’); //读取Cookie值
$.cookie(‘the_cookie’, ‘the_value’); //设置cookie的值
$.cookie(‘the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效期 路径 域名等
$.cookie(‘the_cookie’, ‘the_value’); //新建cookie
$.cookie(‘the_cookie’, null); //删除一个cookie