<!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. （转）system.badimageformatexception 未能加载文件或程序集

    “/xxxxx”应用程序中的服务器错误. ------------------------------------------------------------------------------- ...

  2. Maven 系列 二 ：Maven 常用命令，手动创建第一个 Maven 项目

    1.根据 Maven 的约定,我们在D盘根目录手动创建如下目录及文件结构: 2.打开 pom.xml 文件,添加如下内容: 1 <project xmlns="http://maven ...

  3. android 线性布局

    activity_main.xml线性布局 <?xml version="1.0" encoding="utf-8"?> <LinearLay ...

  4. poj 3279 Fliptile(二进制)

    http://poj.org/problem?id=3279 在n*N的矩阵上,0代表白色,1代表黑色,每次选取一个点可以其颜色换过来,即白色变成黑色,黑色变成白色,而且其上下左右的点颜色也要交换,求 ...

  5. 20172306《Java程序设计与数据结构》第八周学习总结

    20172306<Java程序设计>第8周学习总结 教材学习内容总结 第十章最开始自己看的时候,没怎么看懂,等老师讲完之后,又看了一遍,就理解了很多.第十章主要学习了以下几点: 1.对于几 ...

  6. POJ 3469.Dual Core CPU 最大流dinic算法模板

    Dual Core CPU Time Limit: 15000MS   Memory Limit: 131072K Total Submissions: 24830   Accepted: 10756 ...

  7. UI设计师如何提升审美？

    不得不承认,作为一名设计师,独特的审美能力是设计的灵感所在,不过很多刚刚从事UI设计的人,审美能力真的非常的一般,所以心中难免有这样的疑问,我的审美能通过后天的努力提升吗?关于这点,可以非常肯定的说, ...

  8. Zxing2.1扫描取景框变形问题解决

    修改竖屏扫描的贴子,2.0之前的都很适用.可是到了2.1,有些贴子的做法可以将扫描框改为竖屏,但是取景框里扫描到的东西是变形的(扁的),本人仔细研究一番,终于解决了这个问题,下面贴出解决办法: 1.修 ...

  9. 2019.01.19 codeforces343D.Water Tree（树剖+ODT）

    传送门 ODTODTODT板子题. 支持子树01覆盖,路径01覆盖,询问一个点的值. 思路:当然可以用树剖+线段树,不过树剖+ODTODTODT也可以很好的水过去. 注意修改路径时每次跳重链都要修改. ...

  10. python中下划线

    引用:https://blog.csdn.net/tcx1992/article/details/80105645?from=timeline Python中下划线的5种含义 class A(obje ...