<!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. Java开发的基础条件:

    ------------Java开发的基础条件:Java相关的基础+对编程的自己的理解+调试代码+自己的坚持 一定要谦逊,不人云亦云,不去妄言某一门语言或技术好或坏!不是哪门技术有问题,而是(不会用才 ...

  2. C#环境

  3. 精简高效的css命名准则

    对于css,为了避免样式冲突,我们总会赋予相当特殊的命名,或是在选择符上添加html标记,或是使用层级.我们为避免在冲突上做文章,就会把代码的命名变得复杂化. 如果css的重用性越高,相比就越高效.如 ...

  4. 高斯混合模型（GMM）

    复习: 1.概率密度函数,密度函数,概率分布函数和累计分布函数 概率密度函数一般以大写“PDF”(Probability Density Function),也称概率分布函数,有的时候又简称概率分布函 ...

  5. HashMap Hasptable的区别

    HashTable的应用非常广泛,HashMap是新框架中用来代替HashTable的类,也就是说建议使用HashMap,不要使用HashTable.可能你觉得HashTable很好用,为什么不用呢? ...

  6. 即时搜索或input实时检测监听输入框变化

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...

  7. 脑筋急转弯——Google 面试

    1. 村子里有100对夫妻,其中每个丈夫都瞒着自己的妻子偷情...村里的每个妻子都能立即发现除自己丈夫之外的其他男人是否偷情,唯独不知道她自己的丈夫到底有没有偷情.村里的规矩不容忍通奸.任何一个妻子, ...

  8. Tomcat端口被占用错误

    所报错误: 严重: Error initializing endpointjava.lang.Exception: Socket bind failed: [730013] ????????????? ...

  9. 微信电脑版-微信for windows客户端发布

    12月份微信Windows版客户端1.0 Alpha推出,昨天微信for windows 1.0客户端(测试版)发布更新,超过三亿人使用的聊天应用,现在登录Windows桌面.你可以在Windows上 ...

  10. PHP模板引擎正则替换函数 preg_replace 与 preg_replace_callback 使用总结

    在编写PHP模板引擎工具类时,以前常用的一个正则替换函数为 preg_replace(),加上正则修饰符 /e,就能够执行强大的回调函数,实现模板引擎编译(其实就是字符串替换). 详情介绍参考博文:P ...