HTML #左侧菜单
时间：2017-08-25 13:13:29
收藏：0
阅读：305
###
<!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
原文：http://www.cnblogs.com/lwsup/p/7427435.html
评论（0）