左侧菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style> .hide{ display: none; } .menu .head{ height:38px; background-color: #2459a2; line-height: 38px; } </style> </head> <body> <div style="height: 48px ;border: 1px solid red"></div> <div style="300px ;border: 1px solid red "> <div class="menu"> <div id='a1' class="head " onclick="caidan('a1')">菜单1</div> <div class="conent"> <div clas="item">内容1</div> <div clas="item">内容1</div> <div clas="item">内容1</div> </div> </div> <div class="menu"> <div id='a2' class="head " onclick="caidan('a2')">菜单2</div> <div class="conent hide"> <div clas="item">内容2</div> <div clas="item">内容2</div> <div clas="item">内容2</div> </div> </div> <div class="menu"> <div id='a3' class="head" onclick="caidan('a3')">菜单3</div> <div class="conent hide"> <div clas="item">内容3</div> <div clas="item">内容3</div> <div clas="item">内容3</div> </div> </div> <div class="menu"> <div id='a4' class="head" onclick="caidan('a4')">菜单4</div> <div class="conent hide"> <div clas="item">内容4</div> <div clas="item">内容4</div> <div clas="item">内容4</div> </div> </div> </div> <script> function caidan(nod) { var head=document.getElementById(nod); curr_meu=head.parentElement.parentElement.children; for (var i=0; i<curr_meu.length; i++){ var item_list=curr_meu[i]; item_list.children[1].classList.add('hide'); } head.nextElementSibling.classList.remove('hide') } </script> </body> </html>