您正在使用IPV4(3.225.221.130)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 冬至节 26
2022年 圣诞节 29
2023年 元 旦 36
2023年 春 节 57
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
JavaScript实现QQ列表展开收缩扩展功能
内容摘要: htmlheadmetahttp-equiv='Content-Type'content='text/html;charset=utf-8'/title无标题文档/titlestyleul,h2{margin:0;padding:0;}li{list-style-type:none;}#list{margin:0auto;border:#333solid1p......
<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>无标题文档</title>

<style>

ul,h2{margin:0;padding:0;}

li{list-style-type:none;}

#list{margin:0auto;border:#333solid1px;width:250px;}

#listh2{background:url(../img/ico1.gif)no-repeat5px14px#0C6;text-indent:20px;height:32px;line-height:32px;}

#listulli{text-indent:25px;border-bottom:#333solid1px;line-height:24px;height:23px;}

#list.active{background:url(../img/ico2.gif)no-repeat5px14px#693;text-indent:20px;height:30px;line-height:30px;}

#listul{display:none;}

.hover{background:#CFC;}

</style>

<script>

window.onload=function(){

varoUl=document.getElementById("list");

varaUl=oUl.getElementsByTagName("ul");

varaH2=oUl.getElementsByTagName("h2");

varaLi=null;

vararrLi=[];

varthat=null;

for(i=0;i<aH2.length;i++){

aH2[i].index=i;

aH2[i].onclick=function(){

if(this.className==''){

for(i=0;i<aH2.length;i++){

aH2[i].className='';

aUl[i].style.display='none';

}

this.className='active';

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

}else{

this.className='';

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

}

}

}

for(i=0;i<aUl.length;i++){

aLi=aUl[i].getElementsByTagName("li");

for(j=0;j<aLi.length;j++){

arrLi.push(aLi[j]);

}

}

for(vari=0;i<arrLi.length;i++){

arrLi[i].onclick=function(){

for(i=0;i<arrLi.length;i++){

arrLi[i].className='';

}

this.className='hover';

}

}

};

</script>

</head>

<body>

<ulid="list">

<liclass="lis">

<h2>我的好友</h2>

<ul>

<li>张三</li>

<li>张四</li>

<li>张五</li>

<li>张六</li>

</ul>

</li>

<liclass="lis">

<h2>企业好友</h2>

<ul>

<li>李四</li>

<li>李小四</li>

<li>李四二</li>

<li>李毅</li>

<li>李二</li>

</ul>

</li>

<liclass="lis">

<h2>黑名单</h2>

<ul>

<li>张三</li>

<li>李四</li>

</ul>

</li>

</ul>

</body>

</html>

版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:js实现带圆角的两级导航菜单效果代码 下一篇:js实现图片粘贴上传到服务器并展示的实例
发布日期:2022/9/20
手机扫二维码直达本页
发布时间:12:33:45
点  击:24
录  入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022