<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
ul,h2{margin: 0; padding: 0;}
li{list-style-type: none;}
#list{width: 240px; border: 1px solid black; margin: 0 auto;}
#list h2{text-indent: 16px;background: url(img/ico1.gif) no-repeat 5px center dodgerblue;}
#list ul li{text-indent: 24px;border: 1px solid black;}
#list ul {display: none;}
#list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }
#list ul .hover { background:#6FF; }
</style>
<script type="text/javascript">
window.onload=function(){
var oUl = document.getElementById('list');
var aH2 = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
var arr=[];
var num=null;
for(var i=0;i<aH2.length;++i){
aH2[i].index=i;
aH2[i].onclick=function(){

for(var i=0;i<aH2.length;++i){

aH2[i].className='';
aUl[i].style.display='';

}



if(this.className==''){
this.className='active';
aUl[this.index].style.display='block';
}else{
this.className='';
aUl[this.index].style.display='none';
}
};
};


for(var j=0;j<aUl.length;++j){
var aLi = aUl[j].getElementsByTagName('li');
for(var i=0;i<aLi.length;++i){
arr.push(aLi[i]);
}
};


for(var i=0;i<arr.length;++i){
arr[i].onclick=function(){
for(var i=0;i<arr.length;++i){
arr[i].className='';
}
this.className='hover';
}
}

};



</script>
<body>
<ul id="list">
<li class="lis">
<h2>我的好友</h2>
<ul>
<li>张一</li>
<li>张二</li>
<li>张三</li>
</ul>
</li>

<li class="lis">
<h2>企业好友</h2>
<ul>
<li>李一</li>
<li>李二</li>
<li>李三</li>
</ul>
</li>

<li class="lis">
<h2>黑名单</h2>
<ul>
<li>王一</li>
<li>王二</li>
<li>王三</li>
</ul>
</li>

</ul>

</body>
</html>

QQ列表展示的更多相关文章

  1. Winform开发主界面菜单的动态树形列表展示

    我在之前很多文章里面,介绍过Winform主界面的开发,基本上都是标准的界面,在顶部放置工具栏,中间区域则放置多文档的内容,但是在顶部菜单比较多的时候,就需要把菜单分为几级处理,如可以在顶部菜单放置一 ...

  2. JSP中列表展示,隔行变色以及S标签的使用

    1.java代码 /** * 列表展示,隔行变色以及S标签的使用 * * @return */ public String list() { List<User> list = new A ...

  3. iOS tableViewCell 在cell赋值、网络加载照片位置偏移大小错乱，做一个类似qq列表的tableview 更新3

    更新3: 问题 加载慢!(一时间给的处理负载过大,要分散)在下载图片,判断状态后 对每个cell对图片灰置图片处理保存,影响了主线程的操作 :上拉加载时,无法上下滑动tableview 无法点击cel ...

  4. Vuex 教程案例：计数器以及列表展示

    本案例github:https://github.com/axel10/Vuex_demo-Counter-and-list 本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法. 从安装到启 ...

  5. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  6. flutter 列表展示

    内容: 1.列表展示 2.轮播图 3.其他 本次的内容也是在上一节的基础上进行操作 我们就搞这个story模块. 目录: story.dart  story主页面 import 'package:fl ...

  7. Django--CRM-客户列表展示, 分页

    一 . 客户列表展示 为了插入数据方便,我们可以用django里面的admin插入数据 创建超级用户 把语言改成中文 结果: 列表展示 展示不同字段的方式: # 有需要的可以写 def__str__( ...

  8. salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

    上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以 ...

  9. [android] 手机卫士黑名单功能（列表展示）

    先把要拦截的电话号码保存到数据库中,拦截模式用个字段区分,1 电话拦截,2 短信拦截,3全部拦截 新建Activity类CallSmsSafeActivity.java 新建布局文件activity_ ...

随机推荐

  1. a版本冲刺第六天

    队名:Aruba   队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章  鼎 学号 昨天完成的任务 今天做的任务 明天要做的任务 困难点 体会 408 学习<第一行代码> 学习活动的消息 ...

  2. js 数据类型 typeof的测试

    , t2 = ', t3 = null, t4 = NaN, t5 = undefined, t6 = function() {}, t7 = true, t8 = window, t9 = docu ...

  3. TAC Beta版本 冲冲冲！！！

    一.Beta版本冲刺博客目录: 第一天 第二天 第三天 第四天 第五天 第六天 第七天 二.Beta版本需要改进完善的功能: service层传入参数的判断与提示以及各函数内的相应提示 界面改进.优化 ...

  4. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【开篇】【持续更新中。。。】

    最近发现web api很火,园内也有各种大神已经在研究,本人在asp.net官网上看到一个系列教程,原文地址:http://bitoftech.net/2013/11/25/detailed-tuto ...

  6. 22章、Java集合框架习题

    1.描述Java集合框架.列出接口.便利抽象类和具体类. Java集合框架支持2种容器:(1) 集合(Collection),存储元素集合 (2)图(Map),存储键值对.

  7. [nosql之缓存memcache]安装篇LInux for Windows

    首先呢在PHP开发的过程中会用到很多缓存服务,从而提升访问质量或者临时存储一些数据. 优点 结构简单,读取速度快,易于维护.还有一些特性memcache redis mongodb都可以用来做为缓存用 ...

  8. mysql [ERROR] Fatal error: Can't open and lock privilege tables: Table 'mysql.host' doesn't exist （转载）

    mysql报错Fatal error: Can't open and lock privilege tables: Table 'mysql.host' doesn't exist 2013-11-2 ...

  9. linux /proc/meminfo 文件分析（转载）

    cat /proc/meminfo    读出的内核信息进行解释,下篇文章会简单对读出该信息的代码进行简单的分析. # cat /proc/meminfo MemTotal:     kB MemFr ...

  10. [Python] 目录和文件操作

    在Linux系统下用Python写脚本,肯定不能避免各种与目录和文件夹有关的操作.为了以后方便查阅,简单地针对Python中与目录和文件夹有关的操作进行汇总. 需要实现导入的模块为: import o ...