Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.01.2011, 12:39
Новичок на форуме
Отправить личное сообщение для securelord Посмотреть профиль Найти все сообщения от securelord
 
Регистрация: 31.01.2011
Сообщений: 8

Показ/скрытие элементов 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>
Ответить с цитированием
  #2 (permalink)  
Старый 31.01.2011, 12:41
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,806

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

Последний раз редактировалось Skipp, 31.01.2011 в 12:43.
Ответить с цитированием
  #3 (permalink)  
Старый 31.01.2011, 12:56
Новичок на форуме
Отправить личное сообщение для securelord Посмотреть профиль Найти все сообщения от securelord
 
Регистрация: 31.01.2011
Сообщений: 8

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

При нажатии на ссылку 1 появляется div с id=1, при нажатии на ссылку 2 появляется div с id 2 и изчезает div с id 1 и так далее...
Ответить с цитированием
  #4 (permalink)  
Старый 31.01.2011, 13:24
Новичок на форуме
Отправить личное сообщение для securelord Посмотреть профиль Найти все сообщения от securelord
 
Регистрация: 31.01.2011
Сообщений: 8

Погуглив и пораскинув мозгами решил задачку сам.
Кому интересно, вот мое "кривое" решение
<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>
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2011, 14:09
Аватар для Vulkan
Профессор
Отправить личное сообщение для Vulkan Посмотреть профиль Найти все сообщения от Vulkan
 
Регистрация: 25.05.2010
Сообщений: 511

Можно чуть проще:
<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>
Ответить с цитированием
  #6 (permalink)  
Старый 31.01.2011, 14:14
Новичок на форуме
Отправить личное сообщение для securelord Посмотреть профиль Найти все сообщения от securelord
 
Регистрация: 31.01.2011
Сообщений: 8

Да, вот только не работает если в <div> находится таблица которую тоже надо скрыть. Ругаеться:
document.getElementById(elems[i].id) is null
Ответить с цитированием
  #7 (permalink)  
Старый 31.01.2011, 14:27
Аватар для Vulkan
Профессор
Отправить личное сообщение для Vulkan Посмотреть профиль Найти все сообщения от Vulkan
 
Регистрация: 25.05.2010
Сообщений: 511

Тогда так:
<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>

Последний раз редактировалось Vulkan, 31.01.2011 в 14:31.
Ответить с цитированием
  #8 (permalink)  
Старый 31.01.2011, 14:49
Новичок на форуме
Отправить личное сообщение для securelord Посмотреть профиль Найти все сообщения от securelord
 
Регистрация: 31.01.2011
Сообщений: 8

Я прошу прощения, изучать js начал совсем недавно.
Если использовать полноценный синтаксис тега <table>, вместе с <tr> и <td>, ваш пример не работает.
Ответить с цитированием
  #9 (permalink)  
Старый 31.01.2011, 15:56
Аватар для Vulkan
Профессор
Отправить личное сообщение для Vulkan Посмотреть профиль Найти все сообщения от Vulkan
 
Регистрация: 25.05.2010
Сообщений: 511

securelord, ну так вам с таблицами или с дивами надо?
Ответить с цитированием
  #10 (permalink)  
Старый 31.01.2011, 16:02
Новичок на форуме
Отправить личное сообщение для securelord Посмотреть профиль Найти все сообщения от securelord
 
Регистрация: 31.01.2011
Сообщений: 8

В оригинале в диве вложены таблицы
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS, RDFa, DOM, XML - Help! О_о Djumpen Общие вопросы Javascript 5 18.11.2010 18:37
Динамическое создание элементов DOM Crudelis Общие вопросы Javascript 7 13.11.2010 01:28
DOM, определение стиля элементов Maximor17 Общие вопросы Javascript 3 04.11.2010 15:24
Не та кодировка при изменении элементов DOM, загружаемых через ajax ShootNik Серверные языки и технологии 16 14.10.2010 08:55
Быстрый разбор списка элементов. B~Vladi Общие вопросы Javascript 31 14.07.2010 14:52