<!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. 探索未知种族之osg类生物---呼吸分解之事件循环二

    VPM矩阵 1.V 表示摄像机的观察矩阵(View Matrix),它的作用是把对象从世界坐标系变换到摄像机坐标系.因此,对于世界坐标系下的坐标值 worldCoord(x0, y0, z0),如果希 ...

  2. 用vs2015 编译 web app ionic

    1.要下载https://git-for-windows.github.io/ 2.下载ionic模版

  3. 03. pt-config-diff

    pt-config-diff h=192.168.100.101,P=3306,u=admin,p=admin h=192.168.100.102,P=3306,u=admin,p=admin pt- ...

  4. samtools

    samtools 用法 samtools <command> [options] command 见以下列表, 每个 command 的 options 也不同 dict faidx in ...

  5. 第一个spring boot 程序

    安装.运行.预览省略 错误1:8080端口被IIS占用,关闭它 Description: The Tomcat connector configured to listen on port 8080 ...

  6. hdu-6058 Kanade's sum

    题意:略 思路:要我们求每个区间第K大数之和,其实可以转换为求多少个区间的第K大数是X,然后我们在求和就好了. 那么我们可以从小到大枚举所有可能成为第K大的数.为什么从小到大呢? 因为从小到大我们就略 ...

  7. transform.forward和vector3.forward

    Vector3.forward的值永远是(0,0,1)(这里的(0,0,1)是世界坐标的(0,0,1)),而transform.forward我们可以理解为其对应物体的z轴方向,是一个向量,而不是一个 ...

  8. presentation skills

    下面是从一个网站摘录下来的关于presentation skill需要回答的14个问题:网站的地址为:http://www.mindtools.com/pages/article/newCS_96.h ...

  9. GDBT

    理论知识: 第四范式自主研发算法GBDT(Gradient Boosting Decision Tree) GBDT是一种基分类器为决策树的集成学习方法.决策树是一种常见的机器学习算法,GBDT中使用 ...

  10. 2019.01.20 NOIP模拟 迅雷（kruskal/二分+并查集）

    传送门 题意简述:给一张带权无向图,有a,ba,ba,b两类特殊点和普通点,问使得至少有一个aaa和一个bbb连通所需要的所有边边权最小值的最大值是多少. 思路: 一眼发现可以二分,考虑怎么check ...