JS实现div盒子的显示与隐藏

Question

<div id="menu"> <!--头部菜单-->
    <div id="menubar">
    <ul id="menu1">
        <li><a href="#" class="a" id="return_base">返回题库</a>
         <div></div>  <!--空盒子，便于js遍历-->
        </li>
        <li><a href="#" class="a">新建题库</a>
         <div></div>  <!--空盒子，便于js遍历-->
        </li>
        <li><a href="#" class="a">新增试题</a>
        <div>
            <a href="#">单选题</a>
            <a href="#">多选题</a>
            <a href="#">判断题</a>
            <a href="#">填空题</a>
        </div>
        </li>
        <li><a href="#" class="a">试题浏览</a>
        <div>
            <a href="#">单选题</a>
            <a href="#">多选题</a>
            <a href="#">判断题</a>
            <a href="#">填空题</a>
        </div>
        </li>
        <li><a href="#" class="a">查找试题</a>
        <div>
            <a href="#">按分值查找</a>
            <a href="#">知识点查找</a>
            <a href="#">按难度查找</a>
            <a href="#">题干关键字</a>
        </div>
        </li>
        <input type="text" name="search" class="searchtext" >
        <input type="button" name="bsearch" class="searchbutton" value="查找"> 
    </ul>
    </div>
</div>

如上HTML代码，怎样给菜单写一段JS，使得每次点击一个菜单功能时，都会出现一个相应的div盒子，而其他菜单功能对应的盒子会被隐藏。谢谢！（注：请给出一个能实现本例的代码，因为我在网上找了但都不是理想的效果）