简单Tree分级菜单--Html

效果图

未打开

打开

主要说一下<style><script>两个标签中的处理

<style>ul,li,h2{  margin:0px;list-style:none;padding:0px}</style>

#list{width:240px;border:1px solid#ffc96b;margin:20px auto;background:#f8f5e4;}

#list li.til{font:18px/34px "微软雅黑";background:#77d2c6;}

#list li.active{font:18px/34px "微软雅黑";background:#ff27e2;}

#list ul{display:none;}

#list ul li{font:16px/28px "微软雅黑";text-indent:18px;}

</style>

<script>

window.onload=function(){

varoUl=document.getElementById("list");

varaH2=oUl.getElementsByTagName("h2");

varaUl=oUl.getElementsByTagName("ul");

for(vari=0;i

aH2[i].index=i;

aH2[i].onclick=function(){

if(this.className=="til"){

aUl[this.index].style.display="block";

this.className="active";

}else{

aUl[this.index].style.display="none";

this.className="til";

}

}

}

}

</script>

这个script主要的关键点在于（我的好友，我的企业好友，我的黑名单）这三个<h2>标签的设置的class类名在点击事件onclick切换，而对应的在<style>标签中把对应的样式css写完整就OK了。。。

刚学html，写这个文章既是自己积累也是分享跟我一样的初学者，非喜勿喷，谢谢！！！