<!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. jQuery倒计时插件

    倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...

  3. BZOJ3771: Triple

    额我不是来发题解的,只是非常郁闷= =,这题的答案最大是1.2e9/6左右,所以用ntt的话要在模意义下除以6,不能最后除,否则刚好爆掉= = #include<bits/stdc++.h> ...

  4. yii2 session的使用方法

    yii2打开session use yii\web\Session; $session = Yii::$app->session; // check if a session is alread ...

  5. 让Web页面中的编辑器支持黏贴或直接拖拽来添加图片

    基本原理是将剪贴板中的图片二进制数据转为Base64编码 代码: <html> <head> </head> <body> <script src ...

  6. [Unity3D] Normal map、Diffuse map 和 Speculer map

    Normal map : Normal map (法线贴图) 它的作用是模拟出高模上的一些细节纹理,特别是将高模上的圆滑和粗糙度投射到低模上,让低模也有高模的效果. 因为高模的面数非常多,导入引擎后电 ...

  7. 三列等高 css实现

    实现这个三列等高 布局需要最外层的一个div wrap容器 里面有三个div容器 这个最外层div 需要移除隐藏 overflow:hidden;  关键点就是三列div 同时margin-botto ...

  8. Android锁屏后数据改变的解决方案

    如果一个界面设置成横屏,那么锁屏再开启之后,会重新执行一遍onCreate()方法.对于这个问题的解决方案如下: 只需要在Menifest文件的activity相应标签下添加这行代码即可: andro ...

  9. linux下共享库的注意点之-fpic

    在编译共享库必须加上-fpic.这是为什么呢? 首先看一个简单的例子: #include <stdio.h> int fun1() { printf("fun1\n") ...

  10. UI第九节——UIStepper

    - (void)viewDidLoad {    [super viewDidLoad];        // 实例化UIStepper,大小是固定的    UIStepper *stepper = ...