<!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>

js五道经典练习题--第四道qq好友列表的更多相关文章

  1. js五道经典练习题--第二道仿qq聊天框

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. js五道经典练习题--第五道成绩列表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. js五道经典练习题--第三道实现购物车功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. js五道经典练习题--第一道

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）

    iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...

  6. [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView

    A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组   code so ...

  7. 仿QQ好友列表界面的实现

    TableView有2种style:UITableViewStylePlain 和 UITableViewStyleGrouped. 但是QQ好友列表的tableView给人的感觉似乎是2个style ...

  8. ExpandableListView仿QQ好友列表

    本例中,对ExpandableListView中的数据进行了封装,分为两个JavaBean,一个为Group类表示组信息,一个Child类表示该组下子列表信息: Group: public class ...

  9. （二十七）QQ好友列表的实现

    QQ好友列表通过plist读取,plist的结构为一组字典,每个字典内有本组的信息和另外一组字典代表好友. 要读取plist,选择合适的数据结构,例如NSArray,然后调用initWithConte ...

随机推荐

  1. Linux下动态库使用小结

    转自:https://blog.csdn.net/jaylong35/article/details/6132087 1. 静态库和动态库的基本概念        静态库,是在可执行程序连接时就已经加 ...

  2. LaTeX数学公式大全

    原写于我的洛谷博客(传送门),现搬到这个博客上. 建议去洛谷博客上看,因为两边的编辑器在有些功能上不能通用,所以之后若有删改或新增内容只在洛谷博客上弄,这边就懒得改了. 原本是针对洛谷的编辑器,不过懒 ...

  3. Tag file

    JSP 2.0 引入 Tag file ,tag file 以 tag 或 tagx 为后缀,它们可以包含其他资源文件:一个被其他文件包含的 tag file 应该以 tagf 为后缀. 如同JSP页 ...

  4. Hive 系列（一）安装部署

    Hive 系列(一)安装部署 Hive 官网:http://hive.apache.org.参考手册 一.环境准备 JDK 1.8 :从 Oracle 官网下载,设置环境变量(JAVA_HOME.PA ...

  5. python文件读取操作、序列化

    1.对文件进行读写操作时,先建立文件句柄 f = open("test.txt","r",encoding="UTF-8") 其中,r为文件 ...

  6. 配置nginx1.8支持thinkPHP3.2 pathinfo模式

    nginx 下conf/nginx.conf 或者自己的vhosts更改以前的参数 location / { root   html; index  index.html index.htm inde ...

  7. boost timer代码学习笔记

    socket连接中需要判断超时 所以这几天看了看boost中计时器的文档和示例 一共有五个例子 从简单的同步等待到异步调用超时处理 先看第一个例子 // timer1.cpp: 定义控制台应用程序的入 ...

  8. 使用 kbmmw 的ORM开发纯REST数据库访问服务

    运行环境: WIN 10  X64 delphi 10.2.2 kbmmw 5.05.11 Firefox 58.0.2 今天使用最新的kbmmw 版本做一个基于ORM的纯数据库访问的REST 服务器 ...

  9. Linux 文件授权

    Linux用户权限     在Linux操作系统中,root的权限是最高的,相当于windows的administrator,拥有最高权限,能执行任何命令和操作,在Linux系统中,通过UID来区分用 ...

  10. 2018.11.03 NOIP模拟 树（长链剖分优化dp）

    传送门 考虑直接推式子不用优化怎么做. 显然每一个二进制位分开计算贡献就行. 即记录fi,jf_{i,j}fi,j​表示距离iii这个点不超过jjj的点的每个二进制位的0/10/10/1个数. 但直接 ...