Как получить и скрыть братьев и сестер в Javascript

<ul>
    <li><a>home</li>
    <li><a onclick="erm()">about</li>
    <li><a>contact</li>
</ul>

<div id="all">
    <div id="home">Home</div>
    <div id="about">About</div>
    <div id="contact">Contact</div>
</div>

Элементы div из #all изначально будут скрыты.

Как бы я показал только содержимое div #about, если пользователь нажмет на ссылку «о» и одновременно скроет братьев и сестер?

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

Даже псевдокод может помочь, я не могу понять это.

пожалуйста, не jQuery, а ванильный Javascript.


javascript siblings
person Chris    schedule 29.07.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Решение :

function hideAllChildrenButOne(parentId, toRevealId) {
     var children = document.getElementById(parentId).children;
     for (var i=0; i<children.length; i++) children[i].style.display="none";
     document.getElementById(toRevealId).style.display="block";
}
hideAllChildrenButOne('all', 'about');
person Denys Séguret    schedule 29.07.2013
comment
+1, но просто любопытно, почему вы использовали .childNodes вместо .children. - person ; 29.07.2013
comment
@CrazyTrain Это была ошибка (которую я исправил незадолго до того, как увидел ваш комментарий) - person Denys Séguret; 29.07.2013
comment
фантастический, такой простой/красивый; Спасибо! чуть позже приму, сейчас рано - person Chris; 29.07.2013