js五道经典练习题--第四道qq好友列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul li{
list-style: none;
}
#list{
width:100px;
margin: 0 auto;
border: 1px solid #ddd;
}
#list ul{
display: none;
}
#list ul li{
height: 40px;
border-bottom: 1px solid #ddd;
line-height: 40px;
text-indent: 10px;
cursor: pointer;
}
#list ul li.hover{
background: blueviolet;
color: #eee;
}
#list li span{
display: inline-block;
height: 40px;
border-bottom: 1px solid #ddd;
width: 100%;
line-height: 40px;
cursor: pointer;
}
#list li span.active{
background: burlywood;
color: #eee;
}
</style>
</head>
<body>
<ul id="list">
<li>
<span>我的好友</span>
<ul>
<li>张三</li>
<li>王五</li>
<li>李四</li>
<li>赵钱</li>
</ul>
</li>
<li>
<span>我的</span>
<ul>
<li>张三</li>
<li>王五</li>
<li>李四</li>
</ul>
</li>
<li>
<span>我的友</span>
<ul>
<li>张三</li>
<li>王五</li>
</ul>
</li>
</ul>
<script>
var oList = document.getElementById("list")
var oSpan = oList.getElementsByTagName("span")
var oUl = oList.getElementsByTagName("ul")
for (var i=0;i<oUl.length;i++) {
tab(i)
}
function tab(a){
var aLi = oUl[a].getElementsByTagName("li")
for (var i=0;i<aLi.length;i++) {
aLi[i].onclick = function(){
for (var i=0;i<aLi.length;i++) {
aLi[i].className = ""
}
this.className = "hover"
}
}
}
for (var i=0;i<oSpan.length;i++) {
oSpan[i].index = i
oSpan[i].onclick = function(){
for (var i=0;i<oSpan.length;i++) {
if(i!=this.index){
oSpan[i].className = ""
oUl[i].style.display = "none"
}
}
if(this.className==""){
this.className = "active"
oUl[this.index].style.display = "block"
}else{
this.className = ""
oUl[this.index].style.display = "none"
}
}
}
</script>
</body>
</html>
最新文章
- getJson
- ECharts的简单使用过程
- Hive基本语法操练
- 闪电动画模拟(Dielectric Breakdown Model)附源码
- nodejs怎么同步从一个数据库查询函数中返回一个值
- win7以管理员身份运行bat提示系统找不到指定的路径。
- JAVA输出图形(网上找的)
- sizeof usage &; big / little endian
- SQL注入攻击
- java敏感词过滤
- Tomcat安装阿里云免费证书
- 由浅入深shell脚本训练
- 使用karma+jasmine做单元测试
- 雪花降落CAEmitterLayer粒子效果
- infiniDB在linux下完成倒库
- 【RL-TCPnet网络教程】第31章 Telnet远程登录基础知识
- 20165228《网络对抗技术》Exp0 Kali安装 Week1
- Xilinx 学习笔记1---新建工程和创建源代码文件
- 老毛子 Padavan 路由器固件开启教育网 IPv6 并实现IPv6转发
- logstash之input、codec学习