<!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. bzoj1835[ZJOI2010]base基站选址

    据说正解是什么线段树优化DP,但是作为脑子有坑选手,我们需要5k的做法: 主席树+决策单调性..... F[m][i]表示已经放置了m个基站,第m个基站放置在第i个村庄,第i个村庄及之前的村庄的总最少 ...

  2. Linux系统下压缩文件时过滤指定的文件 |Linux系统压缩指定文件代码

    进入要压缩的目录: [root@iZ25c748tjqZ wechat]# cd /alidata1/htdocs/wechat/ 查看目录: [root@iZ25c748tjqZ wechat]# ...

  3. WIN7 + IIS7 Service Unavailable HTTP Error 503. The service is unavailable.

    在win7上开启IIS功能,进行网站发布. 但是开启IIS之后,打开默认网站都打不开,显示 Service Unavailable HTTP Error 503. The service is una ...

  4. Arcgis SDE10.1 和 Arcgis server10.1的授权文件license

    把下面内容复制进空白文本文档,改名和后缀为sde.ecp即可. 3dengine,101,ecp.arcgis.engine,none,WEJDFAZAM5FBAZ8LN115 3dserver,10 ...

  5. sde用户下使用sqlplus登录错误ORA-12547: TNS:lost contact

    环境:linux + oracle +arcsde   解决:root用户下增加$ORACLE_HOME/bin/oracle文件的s权限 [oracle@localhost bin]$ chmod ...

  6. JS 面向对象随笔

    1.一个对象的静态属性只能通过类名来访问 不能通过实例来访问 如下面定义个HelloWord的类 function HelloWord(){ console.log("这里是HelloWor ...

  7. 浅谈Android中layout_weight

    引言 在开发android过程中,我们经常需要对界面进行按比例进行布局,我们一般都会使用layout_属性来进行设置.今天这篇文章我们就来简单介绍下layout_weight的使用和布局原理.随着做项 ...

  8. Symbiont

    http://www.weiyangx.com/209230.html Symbiont,Credit Suisse与R3携手革新贷款数据验证环节Symbiont, Credit Suisse and ...

  9. [Python] Python学习笔记之常用模块总结[持续更新...]

    作为一种极其简单的编程语言,Python目前成为了最炙手可热的几种语言之一.它不仅简单易学,而且它还为用户提供了各种各样的模块,功能强大,无所不能.有利必有弊,学习Python同样有困扰,其中之一就是 ...

  10. PhpStorm 9.03 集成 开源中国(oschina.net)的Git项目，提交SVN时注意事项

    第一步:配置 git.exe File -> Default Settings -> Version Control -> Git -> Path go Git executa ...