Форум

avatar · #1 (**permalink**) 19.01.2013, 19:48

Всем привет, помогите реализовать следующее:

есть следующая конструкция, как сделать так, чтобы после нажатия по слою <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>

Deff · #2 (**permalink**) 19.01.2013, 19:51

avatar,
Пример тестового сайта есть ?

avatar · #3 (**permalink**) 19.01.2013, 19:59

Сообщение от Deff

avatar,
Пример тестового сайта есть ?

нет, примера такого сайта нет, могу дать саму тестовую страницу в сборе как работает сейчас только

Deff · #4 (**permalink**) 19.01.2013, 20:01

avatar,

скройте под hide

Цитата:

[HTML hide]
//Код
[/html]

avatar · #5 (**permalink**) 19.01.2013, 20:10

Сообщение от Deff

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>&nbsp;</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>

прикладываю

Deff · #6 (**permalink**) 19.01.2013, 21:27

<!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>&nbsp;</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>

avatar · #7 (**permalink**) 19.01.2013, 22:01

да, по задумке именно так должно работать на выходе, немного экспериментов получилось примерно так как хотелось.

а можно ли тогда сделать так еще, чтобы данный слой скрывался скажем через 10 секунд автоматически, либо наоборот появлялся через 10 секунд 1 раз, если уже перешли по ссылке, то скрывался.

avatar · #8 (**permalink**) 20.01.2013, 23:12

можно ли такое прикрутить?

Deff · #9 (**permalink**) 21.01.2013, 03:54

Сообщение от avatar

а можно ли тогда сделать так еще, чтобы данный слой скрывался скажем через 10 секунд автоматически, либо наоборот появлялся через 10 секунд 1 раз, если уже перешли по ссылке, то скрывался.

http://javascript.ru/setTimeout

Форум

Справочник

Discord чат

Курсы javascript