效果如下：依次为图一---图二----图三----图四

主要实现效果：

点击主标题显示下拉好友，再点击收起下拉好友；鼠标移到好友上背景颜色改变；选中的好友背景颜色也要改变；

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
*{ margin:0px auto;
padding:0px;
font-family:微软雅黑;
font-size:14px;
}
.zhu{ width:200px;
height:30px;
text-align:center;
line-height:30px;
vertical-align:middle;
background-color:#03C;
color:white;
}
.zi{ width:200px;
display:none}
.list{ width:198px;
height:30px;
text-align:left;
line-height:30px;
vertical-align:middle;
border-left:1px solid #999;
border-right:1px solid #999;
}
.kg{
margin-left: 30px;
}
.kg1{
margin-left: 10px;
}
.list:hover{
cursor: pointer;
}

#z4{ border-bottom:1px solid #999;}
</style>

</head>
<body>
<div style="width:200px; height:600px; margin-top:30px">
<div class="zhu" onclick="Show('z1')">
我的好友
</div>
<div class="zi" id="z1">
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">张三</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">李四</span></div>
</div>
<div class="zhu" onclick="Show('z2')">
特别关注
</div>
<div class="zi" id="z2">
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">王五</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">陈六</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">刘二</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">韩七</span></div>
</div>
<div class="zhu" onclick="Show('z3')">
陌生人
</div>
<div class="zi" id="z3">
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">王四</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">陈三</span></div>
</div>
<div class="zhu" onclick="Show('z4')">
黑名单
</div>
<div class="zi" id="z4">
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">刘二</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">韩七</span></div>
</div>
</div>
</body>
<script type="text/javascript">

function Show(id)     //作用是收起或显示下拉好友
{

var z = document.getElementById(id);

if(z.style.display=="block")
{
z.style.display = "none";
}
else
{
z.style.display = "block";
}
}

function Xuan(a)                  //作用是点击好友，好友背景颜色改变
{
var attr = document.getElementsByClassName("list");

for(var i=0;i<attr.length;i++)
{
attr[i].style.backgroundColor = "white";
attr[i].setAttribute("xz","0");
}
a.setAttribute("xz","1");            //自定义属性，将XZ属性添加给选中的div
a.style.backgroundColor = "#F63";
}

function Bian(a)            //作用：鼠标移上背景颜色发生改变
{
var attr = document.getElementsByClassName("list");

for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "white";
}
}

a.style.backgroundColor = "#F63";
}


function Hui(a)           //作用是鼠标移走时，背景颜色取消
{
var attr = document.getElementsByClassName("list");

for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "white";
}
}
}

</script>
</html>

注意：

1、自定义函数运用的形参；

2、为什么不用hover属性，而用onmouseover,onmouseout属性：内嵌样式在js中无法读取。

3、this表示：选中的本div

qq面板/ 好友列表的更多相关文章

  1. web qq 获取好友列表hash算法

    web qq 获取好友列表hash算法 在使用web qq的接口进行好友列表获取的时候,需要post一个参数:hash 在对其js文件进行分析之后,发现计算hash的函数位于: http://0.we ...

  2. XMPP通讯开发-仿QQ显示好友列表和用户组

    在 XMPP通讯开发-服务器好友获取以及监听状态变化   中我们获取服务器上的用户好友信息,然后结合XMPP通讯开发-好友获取界面设计    我们将两个合并起来,首先获取用户组,然后把用户组用List ...

  3. iOS实现类似QQ的好友列表，自由展开折叠（在原来TableView的基础上添加一个字典，一个Button）

    //直接代码 只包含 折叠展开字典的处理搭建#import "CFViewController.h" @interface CFViewController ()<UITab ...

  4. 基于Qt的相似QQ好友列表抽屉效果的实现

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shuideyidi/article/details/30619167     前段时间在忙毕业设计, ...

  5. Hadoop_24_MapReduce实现QQ共同好友

    1.社交粉丝数据分析: 以下是qq的好友列表数据,冒号前是一个用户,冒号后是该用户的所有好友(数据中的好友关系是单向的) A:B,C,D,F,E,O B:A,C,E,K C:F,A,D,I D:A,E ...

  6. OS开发UI篇—使用UItableview完成一个简单的QQ好友列表

    本文转自:http://www.cnblogs.com/wendingding/p/3763330.html 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableVi ...

  7. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）

    iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...

  8. iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（二）

    一.实现效果             二.实现代码 1.数据模型部分 YYQQGroupModel.h文件 // // YYQQGroupModel.h // 02-QQ好友列表(基本数据的加载) / ...

  9. [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView

    A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组   code so ...

随机推荐

  1. Keepalived + HAProxy 搭建【第一篇】HAProxy 的安装和配置

    第一步:准备 1. 操作系统 CentOS-7-x86_64-Everything-1511 2. 安装包 haproxy-1.7.2.tar.gz 第二步:安装 # tar zxvf haproxy ...

  2. JAVA I/O 字符输出流简要概括

    偷个懒,直接参考上篇字符输入流Reader的形式,其实Reader和Writer本来就大同小异: 字符输出流Writer 本篇将对JAVA I/O流中的字符输出流Writer做个简单的概括: 总得来说 ...

  3. python 的正则表达式 贪婪模式与懒惰模式

    正则表达式中用于表示匹配数量的元字符如下: ? 重复0次或1次,等同于{0,1} * 重复0次或更多次,等同于{0,} + 重复1次或更多次,等同于{1,} {n,} 重复n次及以上 上面的表示匹配次 ...

  4. 图解Javascript——作用域、作用域链、闭包

    什么是作用域? 作用域是一种规则,在代码编译阶段就确定了,规定了变量与函数的可被访问的范围.全局变量拥有全局作用域,局部变量则拥有局部作用域. js是一种没有块级作用域的语言(包括if.for等语句的 ...

  5. 谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. Android开发之AChartEngine的使用

    下面附上代码加注解 package com.example.com.my_achartnegine; import android.content.Context; import android.gr ...

  7. iOS开发之transform

    transform主要应用于动画 1.让一个按钮每次向上移动100的距离 UIButton *head = (UIButton *)[self.view viewWithTag:10]; head.t ...

  8. MyBatis框架原理（三）

    一.框架结构原理图 二.MyBatis框架执行流程 三.总结 原理详解: MyBatis应用程序根据XML配置文件创建SqlSessionFactory,SqlSessionFactory在根据配置, ...

  9. javascript . 02 break和continue、while、数组、冒泡排序

    1.1 知识点 NaN是number类型 null是object类型 /**  + 回车  多行注释 table 会为内部的tr td 自动补齐闭合标签 1.2 循环结构 1.2.1  Break和c ...

  10. Oracle SQL 语言分类

     Oracle SQL语句分类 2008-06-17 11:15:25 分类: Linux * 2008/06/17  星期二*蒙昭良*环境:WindowsXP + Oracle10gR2*Oracl ...