效果图
未打开
打开
主要说一下<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，写这个文章既是自己积累也是分享跟我一样的初学者，非喜勿喷，谢谢！！！
