Помогите срытие div
Всем привет, помогите реализовать следующее:
есть следующая конструкция, как сделать так, чтобы после нажатия по слою <div class="link"> открывается ссылка и скрывался слой вместе с ссылкой, необходимо чтобы данное действие выполнялось всего один раз. сейчас переход по ссылке постоянно выполняется, однако нельзя убрать слой после первого нажатия на него. <div id="box1" class="box"> <div class="link"> <a href="test.com" target="_blank">test</a> </div></div> <div id="box3" class="box">z</div> |
avatar,
Пример тестового сайта есть ? |
Цитата:
|
avatar,
:) скройте под hide Цитата:
|
Цитата:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo {
position:absolute;
font-family:Century;
font-size:2em;
font-weight:bold;
z-index:20;
}
#logo1 {
left:50px;
top:50px;
color:#00f;
}
#logo2 {
left:52px;
top:52px;
color:#f00;
z-index:10;
}
.box {
position:absolute;
height:100%;
width:1024px;
border:15px solid #000;
}
#box1 {
left:150px;
top:150px;
border-color:#f00;
z-index:40;
}
#box2 {
left:185px;
top:185px;
border-color:#00f;
z-index:30;
}
#box3 {
left:150px;
top:150px;
border-color:#060;
z-index:20;
}
#box4 {
left:150px;
top:185px;
border-color:#f60;
z-index:10;
}
.link {
width: 1024px;
height: 100%;
background: #fff;
opacity: 0.1;
}
.link a {
display: block;
text-align: center;
height: 100%;
color: #000;
}
</style>
<title>aaaa</title>
</head>
<body>
<h1> </h1>
<div id="box1" class="box"> <div class="link">
<a href="test.com" target="_blank">test</a>
</div></div>
<div id="box3" class="box">z</div>
</body>
</html>
прикладываю |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo {
position:absolute;
font-family:Century;
font-size:2em;
font-weight:bold;
z-index:20;
}
#logo1 {
left:50px;
top:50px;
color:#00f;
}
#logo2 {
left:52px;
top:52px;
color:#f00;
z-index:10;
}
.box {
position:absolute;
height:100%;
width:1024px;
border:15px solid #000;
}
#box1 {
left:150px;
top:150px;
border-color:#f00;
z-index:40;
}
#box2 {
left:185px;
top:185px;
border-color:#00f;
z-index:30;
}
#box3 {
left:150px;
top:150px;
border-color:#060;
z-index:20;
}
#box4 {
left:150px;
top:185px;
border-color:#f60;
z-index:10;
}
.link {
width: 1024px;
height: 100%;
background: #fff;
opacity: 0.1;
}
.link a {
display: block;
text-align: center;
height: 100%;
color: #000;
}
</style>
<title>aaaa</title>
</head>
<body>
<h1> </h1>
<div id="box1" class="box"> <div id="link-1" class="link">
<a href="test.com" target="_blank" onclick="Test('link-1')">test</a>
</div></div>
<div id="box3" class="box">z</div>
<script>
function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
function Test(a) {
setcookie(a,true,24*60*60*1000); //на сутки
document.getElementById(a).style.display='none';
}
if(getcookie('link-1'))document.getElementById(a).style.display='none';
</script>
</body>
</html>
|
да, по задумке именно так должно работать на выходе, немного экспериментов получилось примерно так как хотелось.
а можно ли тогда сделать так еще, чтобы данный слой скрывался скажем через 10 секунд автоматически, либо наоборот появлялся через 10 секунд 1 раз, если уже перешли по ссылке, то скрывался. |
можно ли такое прикрутить?
|
Цитата:
|
| Часовой пояс GMT +3, время: 18:02. |