美文网首页
简单Tree分级菜单--Html

简单Tree分级菜单--Html

作者: 简鱼7819 | 来源:发表于2016-10-28 08:25 被阅读152次

效果图

未打开

打开

主要说一下<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,写这个文章既是自己积累也是分享跟我一样的初学者,非喜勿喷,谢谢!!!

相关文章

网友评论

      本文标题:简单Tree分级菜单--Html

      本文链接:https://www.haomeiwen.com/subject/lxksuttx.html