html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>我的题库</title>
<link href="css/myexbase.css" rel="stylesheet" type="text/css">
</head>
<body>
<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>
请问如何编写相应的JavaScript，来实现在上例中点击不同的菜单功能，显示相应的div盒子，并隐藏其他菜单所对应的div盒子。我在网上找过但结果都不理想，请帮忙看看，以上述代码为例，实现div盒子切换，请在JavaScript代码做相应的注释以便理解，（当然可以使用尽可能简单易懂的语法）谢谢！
