Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Открыть скрытую ссылку (https://javascript.ru/forum/project/52516-otkryt-skrytuyu-ssylku.html)

Skriptor 22.12.2014 22:41
Открыть скрытую ссылку
 
Как исправить здесь код, чтобы по клику на одну из видимых рекламных ссылок (ссылка1 или ссылка2) - появлялась невидимая ссылка3 (желательно исправив данный код, а не заменив его на другой):
<html>
<head>
<title>HTML Main page</title>
<meta http-equiv="Content-Type" content="text/html; charset=window-1251">
<script type='text/javascript'>
function trans(G10) {
document.getElementById("site55").innerHTML = "";
}

function trans(G20) {
document.getElementById("site56").innerHTML = "";
}
</script>
</head>
<body>
<a href="http://ссылка1" target="_blank" id="site55" onclick="trans(G10);">SAPE</a>
<br>
<a href="http://ссылка2" target="_blank" id="site56" onclick="trans(G20);">MIRALINKS</a>
<br>
<a href="http://ссылка3" style="visibility:hidden" target="_blank" id="site57">GO!</a>
</body>
</html>

krutoy 22.12.2014 23:24 
<html>
<head>
<title>HTML Main page</title>
<meta http-equiv="Content-Type" content="text/html; charset=window-1251">
</head>
<body>
<a href="http://ссылка1" target="_blank" id="site55" onclick="return trans(this);">SAPE</a>
<br>
<a href="http://ссылка2" target="_blank" id="site56" onclick="return trans(this);">MIRALINKS</a>
<br>
<a href="http://ссылка3" style="display: none" target="_blank" id="site57">GO!</a>
<script type='text/javascript'>
h=document.querySelector("#site57")
show=function(){h.style.display="block"}
function trans(ths) {
ths.innerHTML=""
show()
return false
}
</script>

</body>
</html>

Skriptor 23.12.2014 13:24
Ага спасибо. А как сделать чтобы обе исчезали, а третья появилась?

krutoy 23.12.2014 16:16
Цитата:
Сообщение от Skriptor
А как сделать чтобы обе исчезали, а третья появилась?
 
<html>
<head>
<title>HTML Main page</title>
<meta http-equiv="Content-Type" content="text/html; charset=window-1251">
</head>
<body>
<a href="http://ссылка1" target="_blank" id="site55" onclick="return trans(this);">SAPE</a>
<br>
<a href="http://ссылка2" target="_blank" id="site56" onclick="return trans(this);">MIRALINKS</a>
<br>
<a href="http://ссылка3" style="display: none" target="_blank" id="site57">GO!</a>
<script type='text/javascript'>
h=document.querySelector("#site57")
v1=document.querySelector("#site55")
v2=document.querySelector("#site56")
show=function(){h.style.display="block"}
function trans(ths) {
v1.innerHTML=v2.innerHTML=""
show()
return false
}
</script>
 
</body>
</html>

Skriptor 25.12.2014 15:22
Немного сложно понять логику здесь, хотя срабатывает.
Если можно, объясните пожалуйста, что означает здесь:
v1.innerHTML=v2.innerHTML=""
Также не понял значения querySelector
Пока что изучаю чистый javascript, хотелось бы упростить код (пусть даже больше места займет), но чтобы понять логику.

Malleys 25.12.2014 15:29
Цитата:
Сообщение от Skriptor (Сообщение 348298)
v1.innerHTML=v2.innerHTML=""
Означает, как v1.innerHTML, так и v2.innerHTML присвоить "";

Malleys 25.12.2014 15:34
Цитата:
Сообщение от Skriptor (Сообщение 348298)
не понял значения querySelector.
Метод querySelector() возвращает первый элемент, соответствующий заданному CSS-селектору

Skriptor 25.12.2014 18:07
Постарался учесть предыдущие разъяснения, подготовил такой вариант, но почему то не срабатывает... Почему?
<html>
<head>
<title>HTML Main page</title>
<meta http-equiv="Content-Type" content="text/html; charset=window-1251">
<script type='text/javascript'>
function trans(el1,el2) {
el1=document.getElementById("site55");
el2=document.getElementById("site56");
e1.innerHTML=el2.innerHTML="";
document.getElementById("site57").style.visibility = "visible";
}
</script>
</head>
<body>
<a href="http://ссылка1" target="_blank" id="site55" onclick="trans(this);">SAPE</a>
<br>
<a href="http://ссылка2" target="_blank" id="site56" onclick="trans(this);">MIRALINKS</a>
<br>
<a href="http://ссылка3" style="visibility:hidden" target="_blank" id="site57">GO!</a>
</body>
</html>

Malleys 25.12.2014 18:19
Кликаешь по одной из ссылок, обе скрываются, 3-яя проявляется
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
	<title>HTML Main page</title>
    <script>
	
function $(element) {
  return document.getElementById(element);
}
	
function trans() {
  $("site55").style.visibility = 'hidden';
  $("site56").style.visibility = 'hidden';;
  $("site57").style.visibility = 'visible';
}

    </script>
  </head>
  <body>
    <a href="http://ссылка1" target="_blank" id="site55" onclick="trans(); return false; ">SAPE</a><br />
	<a href="http://ссылка2" target="_blank" id="site56" onclick="trans(); return false; ">MIRALINKS</a><br />
	<a href="http://ссылка3" style="visibility: hidden; " target="_blank" id="site57"onclick="return false; ">GO!</a>
  </body>
</html>

Skriptor 25.12.2014 22:53
Почему у меня не сработало? Что в приведенном мною коде не так? Интересуюсь для изучения... чтобы в следующий раз учесть.

Malleys 27.12.2014 14:02
Цитата:
Сообщение от Skriptor
Что в приведенном мною коде не так?
1. Uncaught ReferenceError: e1 is not defined
Отпечатка в 9-ой строке.

2. В конец функции срабатывающей при клике или в конец значения атрибута onclick, чтобы не перебрасывало при щелчке на новую страницу необходимо добавить return false;


Часовой пояс GMT +3, время: 10:33.