Показ/скрытие элементов DOM
Есть задача: нажимая на ссылку должна отображаться только одна ячейка таблицы (1-1, 2-2 и т.д.). Проблема состоит в том что после нажатия на несколько ссылок ячейки отображаются все одновременно. А нужно только одна.
Помогите. <script> function show1() { document.getElementById("1").style.display="block"; } function show2() { document.getElementById("2").style.display="block"; } function show3() { document.getElementById("3").style.display="block"; } </script> <a href="" onClick="show1(); return false;>1</a> <a href="" onClick="show2(); return false;>2</a> <a href="" onClick="show3(); return false;>3</a> <table> <tr> <td id="1">1</td> <td id="2">2</td> <td id="3">3</td> </tr> </table> |
<script> function show(id){ document.getElementById(id).style.display="block"; } </script> <a href="javascript:void(0)" onClick="show('e1')" >1</a> <a href="javascript:void(0)" onClick="show('e2')">2</a> <a href="javascript:void(0)" onClick="show('e3')">3</a> <div style="display: none" id="e1">1</div> <div style="display: none" id="e2">2</div> <div style="display: none" id="e3">3</div> |
Спасибо за ответ. Но нужно немного не то.
При нажатии на ссылку 1 появляется div с id=1, при нажатии на ссылку 2 появляется div с id 2 и изчезает div с id 1 и так далее... |
Погуглив и пораскинув мозгами решил задачку сам.
Кому интересно, вот мое "кривое" решение :) <script> function show(id){ var div = document.getElementById('sh') var elems = div.getElementsByTagName('*') for(var i=0; i<elems.length; i++) document.getElementById(elems[i].id).style.display="none"; document.getElementById(id).style.display="block"; } </script> <a href="javascript:void(0)" onClick="show('e1')" >1</a> <a href="javascript:void(0)" onClick="show('e2')">2</a> <a href="javascript:void(0)" onClick="show('e3')">3</a> <div id="sh"> <div class="block" style="display: none" id="e1">1</div> <div class="block" style="display: none" id="e2">2</div> <div class="block" style="display: none" id="e3">3</div> </div> |
Можно чуть проще:
<script> function show(id){ var div = document.getElementById('sh'), elems = div.getElementsByTagName('*'); for(var i=0; i<elems.length; i++) document.getElementById(elems[i].id).style.display = (elems[i].id != id ? "none" : "block"); } </script> <a href="javascript:void(0)" onClick="show('e1')" >1</a> <a href="javascript:void(0)" onClick="show('e2')">2</a> <a href="javascript:void(0)" onClick="show('e3')">3</a> <div id="sh"> <div class="block" style="display: none" id="e1">1</div> <div class="block" style="display: none" id="e2">2</div> <div class="block" style="display: none" id="e3">3</div> </div> |
Да, вот только не работает если в <div> находится таблица которую тоже надо скрыть. Ругаеться:
document.getElementById(elems[i].id) is null |
Тогда так:
<script> function show(id){ var div = document.getElementById('sh'), elems = div.getElementsByTagName('*'); for(var i=0; i<elems.length; i++) if(elems[i].id) document.getElementById(elems[i].id).style.display = elems[i].id != id ? "none" : "block"; else elems[i].style.display = "none"; } </script> <a href="javascript:void(0)" onClick="show('e1')" >1</a> <a href="javascript:void(0)" onClick="show('e2')">2</a> <a href="javascript:void(0)" onClick="show('e3')">3</a> <div id="sh"> <div class="block" style="display: none" id="e1">1</div> <div class="block" style="display: none" id="e2">2</div> <table>fff</table> <div class="block" style="display: none" id="e3">3</div> </div> |
Я прошу прощения, изучать js начал совсем недавно.
Если использовать полноценный синтаксис тега <table>, вместе с <tr> и <td>, ваш пример не работает. |
securelord, ну так вам с таблицами или с дивами надо?
|
В оригинале в диве вложены таблицы:)
|
Часовой пояс GMT +3, время: 16:28. |