初学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的聊天界面可以 ...
随机推荐
- <linux下extmail服务的搭建>
下载2个软件包: extmail-1.1.0.tar.gz extman-1.1.tar.gz 下载地址:http://www.cpan.org/ 创建extsuite目录 mkdir /va ...
- js 限制文本框不能输入单引号
<input onkeydown="if(event.keyCode==32||event.keyCode==188||event.keyCode==222){return false ...
- Java并发(六):并发策略
通过多次优化实例来了解选择并发策略的正确姿势 通过模拟浏览器程序的渲染页面(Page-Rendering)功能,为了方便,假设HTML页面只会包含标签文本和图片以及URL; 第一个版本:串行加载页面元 ...
- linux解压与参数介绍
linux下 各种解压文件使用方法:https://www.jianshu.com/p/ca41f32420d6 解压参数详解:http://www.cnblogs.com/jyaray/archiv ...
- LVS Direct Routing 直接路由
1. Direct Routing 直接路由 director分配请求到不同的real server, real server处理请求后直接回应给用户,这样director负载均衡器仅处理客户机与服务 ...
- System Center Configuration Manager 2016 域准备篇（Part4）
步骤4.创建系统管理容器 注意:在Active Directory域控制器服务器(AD01)上以本地管理员身份执行以下操作 有关您为何这样做的详细信息,请参阅https://docs.microsof ...
- 数据库SQL优化大总结之 百万级数据库优化方案2
网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 这篇文章我花费了大量的时间查找资料.修改.排版,希望大家阅读之后, ...
- TFS无法确定工作区解决方案
当TFS遇到无法确定工作区时,删除掉SUO和VSSSCC文件,当然也有可能不是这两个,反正是SLN文件以外的两个文件,毕竟是昨天做的事,有点忘记了.所以,做掉文件之前,要做好备份O(∩_∩)O~
- linux下获取外网IP
使用阿里云或者有多个网卡IP的机器需要取外网IP时,可以用下面这种 wget -qO - ifconfig.co 更多方法参考:https://yq.aliyun.com/ziliao/105999
- LeetCode Minimum Depth of Binary Tree 找最小深度（返回最小深度）
题意:找到离根结点最近的叶子结点的那一层(设同一层上的结点与根结点的距离相等),返回它所在的层数. 方法有: 1.递归深度搜索 2.层次搜索 方法一:递归(无优化) /** * Definition ...