Javascript-форум - Показ/скрытие элементов DOM

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Показ/скрытие элементов DOM (https://javascript.ru/forum/dom-window/14786-pokaz-skrytie-ehlementov-dom.html)

securelord

31.01.2011 13:39

Показ/скрытие элементов 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>

Skipp

31.01.2011 13:41

<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>

securelord

31.01.2011 13:56

Спасибо за ответ. Но нужно немного не то.

При нажатии на ссылку 1 появляется div с id=1, при нажатии на ссылку 2 появляется div с id 2 и изчезает div с id 1 и так далее...

securelord

31.01.2011 14:24

Погуглив и пораскинув мозгами решил задачку сам.
Кому интересно, вот мое "кривое" решение :)

<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>

Vulkan

31.01.2011 15:09

Можно чуть проще:

<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>

securelord

31.01.2011 15:14

Да, вот только не работает если в <div> находится таблица которую тоже надо скрыть. Ругаеться:

document.getElementById(elems[i].id) is null

Vulkan

31.01.2011 15:27

Тогда так:

<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>

securelord

31.01.2011 15:49

Я прошу прощения, изучать js начал совсем недавно.
Если использовать полноценный синтаксис тега <table>, вместе с <tr> и <td>, ваш пример не работает.

Vulkan

31.01.2011 16:56

securelord, ну так вам с таблицами или с дивами надо?

securelord

31.01.2011 17:02

В оригинале в диве вложены таблицы:)

securelord

01.02.2011 11:34

Т.е. если код изменить так:

<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>

</head>
<body>
<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 style="display: none" id="e1">
<table >
<tr>
	<td>1</td>
</tr>
</table>
</div>

<div style="display: none" id="e2">2</div>
<div style="display: none" id="e3">3</div>
</div>

</body>

таблица не покажется. Где копать что то не пойму(

Vulkan

01.02.2011 12:08

Тогда вот так можно:

<script>
function show(id){
	var div = document.getElementById('sh'),
	     elems = div.getElementsByTagName('div');

	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>

</head>
<body>
<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 style="display: none" id="e1">
<table >
<tr>
	<td>1</td>
</tr>
</table>
</div>

<div style="display: none" id="e2">2</div>
<div style="display: none" id="e3">3</div>
</div>

</body>

ksa	01.02.2011 13:09

Vulkan, думаю что с условием ты перемудрил малость...

<script>
function show(id){
    var div = document.getElementById('sh'),
         elems = div.getElementsByTagName('div');

    for(var i=0; i<elems.length; i++)
       elems[i].style.display=(elems[i].id==id)? "block": "none";
    }
</script>

</head>
<body>
<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 style="display: none" id="e1">
<table >
<tr>
    <td>1</td>
</tr>
</table>
</div>

<div style="display: none" id="e2">2</div>
<div style="display: none" id="e3">3</div>
</div>
</body>

Vulkan

01.02.2011 13:25

ksa, точно, забыл убрать условие)

Skipp

01.02.2011 13:31

а так ещё короче)

<script>
function show(id){
	var elems = document.getElementById('sh').getElementsByTagName('div');
	for(var i in elems) elems[i].style.display=(elems[i].id==id)? "block": "none";
}
</script>

</head>
<body>
<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 style="display: none" id="e1">
<table >
<tr>
	<td>1</td>
</tr>
</table>
</div>

<div style="display: none" id="e2">2</div>
<div style="display: none" id="e3">3</div>
</div>

</body>

securelord

01.02.2011 14:42

Всем большое спасибо. Все работает как надо.

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