<ul class="menu">
<li>
<a href="###" onclick="a_click(event);">按钮A</a>
<div>内容A</div>
</li>
<li>
<a href="###" onclick="a_click(event);">按钮B</a>
<div>内容B</div>
</li>
<li>
<a href="###" onclick="a_click(event);">按钮C</a>
<div>内容C</div>
</li>
</ul>
<script>

function a_click(event){
 var obj = event.srcElement ? event.srcElement : event.target; 
obj.style.display="none";
}
</script>

------解决方案--------------------
//【恕直言】需求不明确，html结构凌乱，js不知所谓
JScript code
<ul id="menu">
    <li>
        <a href="javascript:void(0)">按钮A</a>
        <div>内容A</div>
    </li>
    <li>
        <a href="javascript:void(0)">按钮B</a>
        <div>内容B</div>
    </li>
    <li>
        <a href="javascript:void(0)">按钮C</a>
        <div>内容C</div>
    </li>
</ul>
<script type="text/javascript">
    var ul=document.getElementById("menu");
    var li=ul.getElementsByTagName("li");
    var div=ul.getElementsByTagName("div");
    var a=ul.getElementsByTagName("a");
    for(var i=0;i<li.length;i++){
        if(i>0)div[i].style.display="none";
        a[i].onclick=(function(x){
            return function(){
                for(var n=0;n<li.length;n++){
                    div[n].style.display="none";
                }
                div[x].style.display="block";
            }
        })(i)
    }
</script>