javascript - How to get and hide siblings in Javascript

Question

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

The divs from #all will initially be hidden.

How would I show just the contents of the #about div if the user will click on the 'about link' and hide the siblings in the same time?

I will basically use the same function on the same event for the other links.

Even a pseudo code might help, I can't get my head around it.

no jQuery please, but vanilla Javascript.

Answer 1

一个解法 ：

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');