Как воплотить появление блока при нажатии на ссылку

[Ghost86421]

Как воплотить появление блока при нажатии на ссылку, только желательно без onclick, если можно конечно? 

Спасибо!

[Yazon_Nile]

html = input:checkbox+div.slideblock

 

css = input[type=checkbox]:checked + .slideblock{display:block;}

[Aleksandr.L]

Ну если именно при нажатии на ссылку, то тогда надо JavaScript использовать. Можно конечно cделать с помощью CSS, имитируя ссылку но, думаю, этот вариант врятли подойдет 

Edited March 8, 2014 by Aleksandr.L

[fiver]

решаю похожую проблему, только у меня несколько блоков.

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

а так же ссылки кнопки на открытие и сами блоки в разных местах страницы.

вот почти готовое решение.

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

А то сейчас они сначала открыты.

<script type="text/javascript">function oc_usr_menu() {if(document.getElementById('usr_menu').style.display == 'block'){document.getElementById('usr_menu').style.display = 'none';document.getElementById('srch_menu').style.display = 'none';document.getElementById('tr_menu').style.display = 'none';document.getElementById('ch_menu').style.display = 'none';} else {document.getElementById('usr_menu').style.display = 'block';document.getElementById('srch_menu').style.display = 'none';document.getElementById('tr_menu').style.display = 'none';document.getElementById('ch_menu').style.display = 'none';}}function oc_srch_menu() {if(document.getElementById('srch_menu').style.display == 'block'){document.getElementById('srch_menu').style.display = 'none';document.getElementById('usr_menu').style.display = 'none';document.getElementById('tr_menu').style.display = 'none';document.getElementById('ch_menu').style.display = 'none';} else {document.getElementById('srch_menu').style.display = 'block';document.getElementById('usr_menu').style.display = 'none';document.getElementById('tr_menu').style.display = 'none';document.getElementById('ch_menu').style.display = 'none';}}function oc_tr_menu() {if(document.getElementById('tr_menu').style.display == 'block'){document.getElementById('srch_menu').style.display = 'none';document.getElementById('usr_menu').style.display = 'none';document.getElementById('tr_menu').style.display = 'none';document.getElementById('ch_menu').style.display = 'none';} else {document.getElementById('tr_menu').style.display = 'block';document.getElementById('usr_menu').style.display = 'none';document.getElementById('srch_menu').style.display = 'none';document.getElementById('ch_menu').style.display = 'none';}}function oc_ch_menu() {if(document.getElementById('ch_menu').style.display == 'block'){document.getElementById('srch_menu').style.display = 'none';document.getElementById('usr_menu').style.display = 'none';document.getElementById('tr_menu').style.display = 'none';document.getElementById('ch_menu').style.display = 'none';} else {document.getElementById('ch_menu').style.display = 'block';document.getElementById('usr_menu').style.display = 'none';document.getElementById('srch_menu').style.display = 'none';document.getElementById('tr_menu').style.display = 'none';}}</script><a href="javascript:oc_usr_menu();">Ññûëêà 1</a><br><a href="javascript:oc_srch_menu();">ññûëêà 2</a><br><a href="javascript:oc_tr_menu();">ññûëêà 3</a><br><a href="javascript:oc_ch_menu();">ññûëêà 4</a><br><br><div id="usr_menu">1111111111111 111111111111111</div><div id="srch_menu">22222222222222 22222222222222</div><div id="tr_menu">333333333333 33333333333333333</div><div id="ch_menu">4444 44444 44444</div>

[DragorWW]

Как воплотить появление блока при нажатии на ссылку, только желательно без onclick, если можно конечно?  Спасибо!

 

Если на чистом js то вот так можно: http://jsfiddle.net/DragorWW/zn23H/ (forEach можно на for заменить если нужно будет для поддержки старых ie)

или вот вариант на jquery http://jsfiddle.net/DragorWW/wHYQ9/

[fiver]

Если на чистом js то вот так можно: http://jsfiddle.net/DragorWW/zn23H/ (forEach можно на for заменить если нужно будет для поддержки старых ie)

или вот вариант на jquery http://jsfiddle.net/DragorWW/wHYQ9/

дело в том, что кнопки стоят отдельно, в одном углу страницы.

А слои отображают контент на странице совсем в другом месте.

А ваш вариант не подходит по расположению. а jquery еще и не работает.

 

Если бы не расположение, то можно было бы использовать выпадающие списки. Благо исходников любых вагон и тележка.

Вариант который выложил я, работает, только не знаю как сделать в начале перехода на страницу, что бы все слои были скрыты. Т.е. кроме кнопок на странице ничего не отображалось.

[fiver]

Ну если именно при нажатии на ссылку, то тогда надо JavaScript использовать.

 Aleksandr.L, можете доделать свой пример с несколькими слоями, что бы они первично были скрыты, при клики на одну ссылку открывался определенный блок, при клике на другую ссылку открывался второй блок, а открытый закрывался. На странице сначала должны быть ссылки, а потом блоки.

<a id="link" href="#">Нажми меня 1</a><a id="link2" href="#">Нажми меня 2</a><a id="link3" href="#">Нажми меня 3</a><div id="content">Молодец!</div><div id="content2">Молодец 2 раза!</div><div id="content3">Молодец три!</div>

[Sensei]

http://jsfiddle.net/uvCh6/

 

тоже самое на jQuery http://jsfiddle.net/uvCh6/1/

Edited March 24, 2014 by Sensei

[fiver]

не работает

Создаю html документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>	<title>Untitled</title>	<script>var btn = document.querySelectorAll('.btn'),    cnt = document.querySelectorAll('.cnt');Array.prototype.forEach.call(btn, function(curr){        curr.addEventListener('click', function() {                Array.prototype.forEach.call(cnt, function(curr){            curr.classList.remove('active');        });                document.querySelector(this.getAttribute('href')).classList.add('active');                return false;            }, false);    });</script><style>.cnt {display: none;}.cnt.active {display: block;}</style>	</head><body><a class="btn" href="#first">Íàæìè ìåíÿ 1</a><a class="btn" href="#second">Íàæìè ìåíÿ 2</a><a class="btn" href="#third">Íàæìè ìåíÿ 3</a><div id="first" class="cnt">Ìîëîäåö!</div><div id="second" class="cnt">Ìîëîäåö 2 ðàçà!</div><div id="third" class="cnt">Ìîëîäåö òðè!</div></body></html>

и открываю разными браузерами, не работает

[Sensei]

Все оттого, что элементов на момент обращения к ним в скрипте еще не существует.

Либо вставляйте скрипт перед закрывающим тегом body, либо выполняйте код по событию load у документа.

[fiver]

Понятно.

Спасибо!

+