如何在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>

#all的div最初会被隐藏。

如果用户点击“关于链接”并同时隐藏兄弟姐妹，我将如何只展示#about div的内容？

我基本上会在同一事件中对其他链接使用相同的功能。

即使是伪代码也可能会有所帮助，我无法理解它。

请不要jQuery，但 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');