<!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. 使用Tophat+cufflinks分析差异表达

    使用Tophat+cufflinks分析差异表达  2017-06-15 19:09:43     522     0     0 使用TopHat+Cufflinks的流程图 序列的比对是RNA分析 ...

  2. FoxMail提示：请求的名称有效，但是找不到请求的类型的数据

    FoxMail发送或者接收邮件的时候,提示如下信息: <错误信息:请求的名称有效,但是找不到请求的类型的数据> 一,DNS解析不稳定 解决办法:修改本地电脑上面本地连接中的DNS地址< ...

  3. snort学习笔记

    Snort有三种工作模式:嗅探器.数据包记录器.网络入侵检测系统(ids). 嗅探器模式仅仅是从网络上读取数据包并作为连续不断的流显示在终端上. 数据包记录器模式把数据包记录到硬盘上. 网络入侵检测模 ...

  4. Memcache类

    class Memcache{ private static $mem = null; public function mem_create(){ self::$mem = new \Memcache ...

  5. 论坛：一对一关联映射/单向关联/两个类间，可以有两个（多个）关联关系/content为大文本类型/

    >>单向:只写一端的映射属性,另一端不写(有一端用不着);双向:两端都写映射属性 >>一对一关联有两类:一类基于主键的(一般不使用),一类基于外键的(重点学习): 外键:是一个 ...

  6. Ubunton安装mysql

    #手下下载tar.gz包#首先手工建立mysql用户和用户组 > groupadd mysql > useradd -r -g mysql mysql#然后就是安装的解压 编译安装 > ...

  7. Elastix 安装G729 G723语音编码

    下載適合自己機器及軟體版本的模組檔,基本上略分為 pentium/pentium2/pentium3/x86_64,Asterisk 1.2/1.4/1.6.前往 http://asterisk.ho ...

  8. Spark学习笔记-GraphX-1

    Spark学习笔记-GraphX-1 标签: SparkGraphGraphX图计算 2014-09-29 13:04 2339人阅读 评论(0) 收藏 举报  分类: Spark(8)  版权声明: ...

  9. spring 学习 二 IOC/DI

    中文名称:控制反转 英文名称:( Inversion of Control ) 1 控制反转作用: 一般在编写java程序时,需要程序员自己创建对象的实例,例如 A a=new A();语句,就是程序 ...

  10. Seaborn图形可视化库

    一.绘图 1)快速生成图 import numpy as np import matplotlib.pyplot as plt def sinplot(filp=): x = np.linspace( ...