###
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.headcolor{ ???????????background-color: gray; ???????????height: 100px; ???????} ???????.bodycolor{ ???????????background-color: green; ???????????width: 50px; ???????} ???????.hide{ ???????????display: none; ???????} ???????.content1{ ???????????color: red; ???????} ???</style></head><body style="margin: 0"> ???<div class="headcolor">111</div> ???<div> ???????<div> ???????????<div id="i1" class="bodycolor" onclick="hide(‘i1‘)">菜单一</div> ???????????<div class="hide"> ???????????????<div>内容1</div> ???????????????<div>内容2</div> ???????????????<div>内容3</div> ???????????</div> ???????</div> ???????<div> ???????<div id="i2" class="bodycolor" onclick="hide(‘i2‘)">菜单二</div> ???????????<div class="hide"> ???????????????<div>内容1</div> ???????????????<div>内容2</div> ???????????????<div>内容3</div> ???????????</div> ???????</div> ???????<div> ???????<div id="i3" class="bodycolor" onclick="hide(‘i3‘)">菜单三</div> ???????????<div class="hide"> ???????????????<div>内容1</div> ???????????????<div>内容2</div> ???????????????<div>内容3</div> ???????????</div> ???????</div> ???????</div> ???<script> ???????function hide(nid) { ???????????var d = document.getElementById(nid); ???????????var item_list = d.parentElement.parentElement.children; ???????????console.log(d); ???????????for(var i=0;i<item_list.length;i++){ ???????????????item_list[i].children[1].classList.add(‘hide‘); ???????????} ???????????d.nextElementSibling.classList.remove("hide") ???????}// ???????function hide(nid) {// ???????????var d = document.getElementById(nid);//// ???????????console.log(d);// ???????????d.nextElementSibling.classList.remove(‘hide‘);// ???????????} ???</script></body></html>###
头
菜单一
内容1
内容2
内容3
菜单二
内容1
内容2
内容3
菜单三
内容1
内容2
内容3
HTML #左侧菜单
原文地址：http://www.cnblogs.com/lwsup/p/7427435.html