初学js之qq聊天展开实例
<body>
<div class="box">
<div class="lists" id="qq">
<div id="div1">
<span class="normal"></span>
<h2>我的好友</h2>
</div>
<ul>
<li>张三</li>
<li>张三</li>
<li>李三</li>
<li>李三</li>
</ul>
<div id="div2">
<span class="normal"></span>
<h2>企业好友</h2>
</div>
<ul>
<li>李四</li>
<li>李四</li>
<li>李四</li>
</ul>
<div id="div3">
<span class="normal"></span>
<h2>黑名单</h2>
</div>
<ul>
<li>王五</li>
<li>王五</li>
</ul> </div>
</div>
</body>
<style>
*{
margin:0;
padding: 0;
}
body{
background: #000;
list-style: none;
}
.box{
width: 255px;
height: 330px;
background-color: #fff;
margin: 155px auto;
position: relative;
}
.box .lists{
border: 1px solid #000;
margin: 5px 8px 0 8px;
width: 239px;
position: absolute;
}
.lists div{
background-color: #00ffff;
cursor: pointer;
}
.lists span.normal{
display:inline-block;
width: 0;
height: 0;
border: 5px solid transparent; /*设置边框无色*/
border-left-color: #333;
margin-left: 2px;
line-height: 40px;
}
.lists span.active{
display:inline-block;
width: 0;
height: 0;
border: 5px solid transparent; /*设置边框无色*/
border-top-color: #333;
margin-left: 2px;
line-height: 40px;
}
.lists h2{
display: inline-block;
font:500 20px/40px "宋体";
cursor: pointer;
}
.lists ul{
/* background-color: #00ffff; */
display: none;
}
.lists ul li{
border-bottom: 1px solid #000;
border-top:none;
}
</style>
<script>
window.onload = function(){
var oQQ = document.getElementById('qq');
var aDiv = oQQ.getElementsByTagName('div');
var aUl = document.getElementsByTagName('ul');
var aLi = document.getElementsByTagName('li');
// console.log(aLi);
var aSpan = oQQ.getElementsByTagName('span');
var aH2 = oQQ.getElementsByTagName('h2'); for(var i = 0;i< aDiv.length;i++){
aDiv[i].index = i;
aDiv[i].onOff = true;
aDiv[i].onclick = function(){
if(this.onOff){
for(var j = 0;j<aUl.length;j++){
aSpan[j].className = 'normal';
aUl[j].style.display = 'none';
aDiv[j].style.background = '#00ffff';
aDiv[j].onOff =true;
}
aUl[this.index].style.display = 'block';
aDiv[this.index].style.background = 'yellow';
aSpan[this.index].className = 'active';
aDiv[this.index].onOff = false;
}else{
aUl[this.index].style.display = 'none';
aDiv[this.index].style.background = '#00ffff';
aSpan[this.index].className = 'normal';
aDiv[this.index].onOff = true;
}
}
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function () {
aLi[this.index].style.background = 'red';
for (var j = 0; j < aLi.length; j++) {
aLi[j].style.background = '';
}
aLi[this.index].style.background = 'red';
} } }
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
body{
background: #000;
list-style: none;
}
.box{
width: 255px;
height: 330px;
background-color: #fff;
margin: 155px auto;
position: relative;
}
.box .lists{
border: 1px solid #000;
margin: 5px 8px 0 8px;
width: 239px;
position: absolute;
}
.lists div{
background-color: #00ffff;
cursor: pointer;
}
.lists span.normal{
display:inline-block;
width: 0;
height: 0;
border: 5px solid transparent; /*设置边框无色*/
border-left-color: #333;
margin-left: 2px;
line-height: 40px;
}
.lists span.active{
display:inline-block;
width: 0;
height: 0;
border: 5px solid transparent; /*设置边框无色*/
border-top-color: #333;
margin-left: 2px;
line-height: 40px;
}
.lists h2{
display: inline-block;
font:500 20px/40px "宋体";
cursor: pointer;
}
.lists ul{
/* background-color: #00ffff; */
display: none;
}
.lists ul li{
border-bottom: 1px solid #000;
border-top:none;
}
</style>
<script>
window.onload = function(){
var oQQ = document.getElementById('qq');
var aDiv = oQQ.getElementsByTagName('div');
var aUl = document.getElementsByTagName('ul');
var aLi = document.getElementsByTagName('li');
// console.log(aLi);
var aSpan = oQQ.getElementsByTagName('span');
var aH2 = oQQ.getElementsByTagName('h2'); for(var i = 0;i< aDiv.length;i++){
aDiv[i].index = i;
aDiv[i].onOff = true;
aDiv[i].onclick = function(){
if(this.onOff){
for(var j = 0;j<aUl.length;j++){
aSpan[j].className = 'normal';
aUl[j].style.display = 'none';
aDiv[j].style.background = '#00ffff';
aDiv[j].onOff =true;
}
aUl[this.index].style.display = 'block';
aDiv[this.index].style.background = 'yellow';
aSpan[this.index].className = 'active';
aDiv[this.index].onOff = false;
}else{
aUl[this.index].style.display = 'none';
aDiv[this.index].style.background = '#00ffff';
aSpan[this.index].className = 'normal';
aDiv[this.index].onOff = true;
}
}
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function () {
aLi[this.index].style.background = 'red';
for (var j = 0; j < aLi.length; j++) {
aLi[j].style.background = '';
}
aLi[this.index].style.background = 'red';
} } }
</script>
</head>
<body>
<div class="box">
<div class="lists" id="qq">
<div id="div1">
<span class="normal"></span>
<h2>我的好友</h2>
</div>
<ul>
<li>张三</li>
<li>张三</li>
<li>李三</li>
<li>李三</li>
</ul>
<div id="div2">
<span class="normal"></span>
<h2>企业好友</h2>
</div>
<ul>
<li>李四</li>
<li>李四</li>
<li>李四</li>
</ul>
<div id="div3">
<span class="normal"></span>
<h2>黑名单</h2>
</div>
<ul>
<li>王五</li>
<li>王五</li>
</ul> </div>
</div>
</body>
</html>
初学js之qq聊天展开实例的更多相关文章
- 初学js之qq聊天实例
实现的功能为上图所示,但是每新发送的消息必须显示在最上面. 我实现了两版,样式有是一样的.我们直接看代码. 版本一: <!DOCTYPE html> <html lang=" ...
- Js打开QQ聊天对话窗口
function openQQ() { var qq = $(this).attr('data-qq');//获取qq号 window.open('http://wpa.qq.com/msgrd?v= ...
- JS简单仿QQ聊天工具的制作
刚接触JS,对其充满了好奇,利用刚学到的一点知识,写了一个简单的仿QQ聊天的东西,其中还有很多的不足之处,有待慢慢提高. 功能:1.在输入框中输入内容,点击发送,即可在上方显示所输入内容. 2.点击‘ ...
- 搭建QQ聊天通信的程序：（1）基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 （1）
搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 原文地址(英文):http://www.networkcomms.net/creating ...
- Socket实现仿QQ聊天（可部署于广域网）附源码（1）-简介
1.前言 本次实现的这个聊天工具是我去年c#程序设计课程所写的Socket仿QQ聊天,由于当时候没有自己的服务器,只能在机房局域网内进行测试,最近在腾讯云上买了一台云主机(本人学生党,腾讯云有个学生专 ...
- QQ聊天气泡（图片拉伸不变样）、内容尺寸定制（高度随字数、字体而变）
- (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; /** QQ聊 ...
- JS获得QQ号码的昵称,头像,生日
这篇文章主要介绍了JS获得QQ号码的昵称,头像,生日的简单实例,有需要的朋友可以参考一下 http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?ui ...
- QQ 聊天机器人小薇 2.1.0 发布！
本次发布加入了支持茉莉机器人,并且更容易搭建开发环境,在线显示登录二维码~ 简介 XiaoV(小薇)是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动: 监听多个 QQ 群消息 ...
- winform实现QQ聊天气泡200行代码
c# winform实现QQ聊天气泡界面,原理非常简单,通过webKitBrowser(第三方浏览器控件,因为自带的兼容性差)加载html代码实现,聊天界面是一个纯HTML的代码,与QQ的聊天界面可以 ...
随机推荐
- 性能测试学习第六天_loadrunner录制的一些问题
1.录制脚本的两种查看方式(脚本查看和树查看) 2.录制选项 在vugen界面点击开始录制,如下图,点击选项,即进入录制选项界面 重点讨论录制选项下 基于HTML的脚本和基于URL的脚本 注:菜单栏图 ...
- juypter-notebook安装配置
juypter-notebook安装配置 Table of Contents 1. jupyter notebook概述 2. jupyter notebook安装 3. 在jupyter noteb ...
- Entity Framework --Entity SQL注意事项
Entity SQL 是 ADO.NET 实体框架 提供的 SQL 类语言,用于支持 实体数据模型 (EDM).Entity SQL 可用于对象查询和使用 EntityClient 提供程序执行的查询 ...
- Paoding-Rose学习
* HttpServletRequest.getContextPath 获取web程序root.如果是默认位置,返回””空串,否则返回 /根路径名 * rose是如何扫描到资源的 利用spring提供 ...
- HDU3308 线段树区间合并
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3308 ,简单的线段树区间合并. 线段树的区间合并:一般是要求求最长连续区间,在PushUp()函数中实 ...
- Object.keys 函数 (JavaScript)
Object.keys 函数 (JavaScript) 返回对象的可枚举属性和方法的名称. 在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys() ...
- UVA1363 - Joseph's Problem（数学，迷之优化）
题意:给出n和k,1≤n,k≤1e9,计算 切入点是k/i 和 k/(i+1)差距不大.令pi = k/i, ri = k%i.如果pi+1 == pi,那么ri+1 == k - pi(i+1) = ...
- a low memory warning should only destroy the layer’s bitmap
https://stablekernel.com/view-controller-in-ios-6/ Some of you may have noticed that your view contr ...
- Http协议--请求报文和响应报文
http协议是位于应用层的协议,我们在日常浏览网页比如在导航网站请求百度首页的时候,会先通过http协议把请求做一个类似于编码的工作,发送给百度的服务器,然后在百度服务器响应请求时把相应 ...
- kafka 开机启动脚本
/etc/init.d$ vi kafka-start-up.sh #!/bin/bash #export KAFKA_HOME=$PATH export KAFKA_HOME=/opt/Kafka/ ...