求一段JS控制DIV显隐的代码,谢谢大家了。
目的:当第一次打开首页时,弹出一DIV,DIV上面有“关闭”和“不再显示”两个按钮,关闭按钮是点击关闭后,刷新网页还显示,点击“不再显示”按钮,无论是关闭页面还是刷新,都...
目的:当第一次打开首页时,弹出一DIV,DIV上面有“关闭”和“不再显示”两个按钮,关闭按钮是点击关闭后,刷新网页还显示,点击“不再显示”按钮,无论是关闭页面还是刷新,都不显示了(听说用Session之类的)控制,先谢谢大家了,有谁做个的给小弟一个。效果如下
图片 展开
图片 展开
2个回答
展开全部
当然会有很多种实现方法是有很多种,我这里用了cookie来实现
一进入这个页面的时候就判断cookie是否有我们之前设置好的cookie,如果有就那个div隐藏掉,你也可以把这个div直接删除;或者是本来就没有这个div,先判断cookie的情况选择添加这个div到指定的位置
因为第一次进入这个页面,cookie肯定是没有我们设置的cookie,那么div显示出来,如果点击了“不再显示”,首先把这个div隐藏(或删掉),然后设置好我们的cookie,这样我们下次打开这个页面就可以判断出有我们设置的cookie,自然这个div就不出来了!
以下是代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function setCookie(value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = "myCookies="+ escape (value) + ";expires=" + exp.toGMTString();
document.getElementById("myDiv").style.display="none";
}
function getCookies(){
var cookieStr = document.cookie;
var cookieValue = "noCookies";
if(cookieStr != "" && cookieStr!=null){
var cookieValueArray = cookieStr.split(";");
for(var i=0;i<cookieValueArray.length;i++){
if(cookieValueArray[i].split("=")[0]=="myCookies"){
cookieValue = cookieValueArray[i].split("=")[1];
}
}
}
return cookieValue;
}
function verifyCookie(){
var alertCookieStr = getCookies();
if(alertCookieStr == "closeWindows"){
document.getElementById("myDiv").style.display="none";
}
}
</script>
</head>
<body onload="verifyCookie();">
<div id="myDiv" style="width:300px; height:100px; line-height: 100px; text-align: center; border: 1px solid;">
这是弹出div <a href="javascript:void(0)" onclick='setCookie("closeWindows");'>不再提示</a>
</div>
</body>
</html>
拿去试试就看到效果了,然后把代码里面的div换成你自己那个弹出div就可以了
一进入这个页面的时候就判断cookie是否有我们之前设置好的cookie,如果有就那个div隐藏掉,你也可以把这个div直接删除;或者是本来就没有这个div,先判断cookie的情况选择添加这个div到指定的位置
因为第一次进入这个页面,cookie肯定是没有我们设置的cookie,那么div显示出来,如果点击了“不再显示”,首先把这个div隐藏(或删掉),然后设置好我们的cookie,这样我们下次打开这个页面就可以判断出有我们设置的cookie,自然这个div就不出来了!
以下是代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function setCookie(value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = "myCookies="+ escape (value) + ";expires=" + exp.toGMTString();
document.getElementById("myDiv").style.display="none";
}
function getCookies(){
var cookieStr = document.cookie;
var cookieValue = "noCookies";
if(cookieStr != "" && cookieStr!=null){
var cookieValueArray = cookieStr.split(";");
for(var i=0;i<cookieValueArray.length;i++){
if(cookieValueArray[i].split("=")[0]=="myCookies"){
cookieValue = cookieValueArray[i].split("=")[1];
}
}
}
return cookieValue;
}
function verifyCookie(){
var alertCookieStr = getCookies();
if(alertCookieStr == "closeWindows"){
document.getElementById("myDiv").style.display="none";
}
}
</script>
</head>
<body onload="verifyCookie();">
<div id="myDiv" style="width:300px; height:100px; line-height: 100px; text-align: center; border: 1px solid;">
这是弹出div <a href="javascript:void(0)" onclick='setCookie("closeWindows");'>不再提示</a>
</div>
</body>
</html>
拿去试试就看到效果了,然后把代码里面的div换成你自己那个弹出div就可以了
追问
非常感谢,谢谢您,
你写的这个代码是我想要的效果,经我在IE8和360测试下,好像不能写cookie,点击不再提示后 关闭页面再打开或者直接刷新这个DIV还是会显示出来。
展开全部
js
<script type="text/javascript">
function aa()
{
if(document.getElementById('wode').className=="id2")
{
document.getElementById('wode').className="id1";
document.getElementById('id3').style.display="none";
document.getElementById('id4').style.display="";
document.getElementById('id5').style.display="none";
}
else
{
document.getElementById('wode').className="id2";
document.getElementById('id3').style.display="";
document.getElementById('id4').style.display="none";
document.getElementById('id5').style.display="";
}
}
可以参考,我做的好像不可以达到你的第二个要求,但是你可以判断session在单位时间内,如果还是同一个人,这个id元素样式就还是 display="none";
<script type="text/javascript">
function aa()
{
if(document.getElementById('wode').className=="id2")
{
document.getElementById('wode').className="id1";
document.getElementById('id3').style.display="none";
document.getElementById('id4').style.display="";
document.getElementById('id5').style.display="none";
}
else
{
document.getElementById('wode').className="id2";
document.getElementById('id3').style.display="";
document.getElementById('id4').style.display="none";
document.getElementById('id5').style.display="";
}
}
可以参考,我做的好像不可以达到你的第二个要求,但是你可以判断session在单位时间内,如果还是同一个人,这个id元素样式就还是 display="none";
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询