【Javascript】入门之QQ列表的实现

描述: 点击朋友/家人/陌生人, 显示/收起对应列表

代码实现:


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>QQ列表</title><style>   *{margin: 0;padding: 0;}li{list-style: none;}#wrap{width: 430px;margin: 20px auto;}.list h3{font: normal 20px/50px "微软雅黑";width: 430px;height: 50px;background-color: #FEDAB8;}.list h3 > img{width: 12px;height: 12px;padding-left: 8px;}.list > ul{display: none;} .list > ul > li{line-height: 30px;}</style>
</head>
<body><!-- 1.布局 --><ul id="wrap"><li class="list"><h3><img src="./images/ico1.gif" alt=""> 朋友</h3><ul><li>进击的企鹅</li><li>又见一帘幽梦</li><li>梦回大唐</li></ul></li><li class="list"><h3><img src="./images/ico1.gif" alt=""> 家人</h3><ul><li>外公</li><li>父亲</li>       <li>表哥</li></ul></li><li class="list"><h3><img src="./images/ico1.gif" alt=""> 陌生人</h3><ul><li>中国移动</li><li>多伦多地产经纪</li><li>娅娅</li></ul></li></ul><script>/* 描述: 滑入每一个h3标签, 将h3后面的ul>li标签显示出来*///  2.1 获取盒子wrap, 元素h3, ul, imgvar wrap = document.getElementById('wrap');// 通过父元素来获取子元素var h3 = wrap.getElementsByTagName('h3');var ul = wrap.getElementsByTagName('ul');var img = wrap.getElementsByTagName('img');console.log(wrap, h3, ul, img);// 2.2 给每一个h3添加划入事件for(var i = 0; i < h3.length; i++){// 自定义索引记录下此时i的值h3[i].index = i;// 获取此时h内的img元素// 添加点击事件h3[i].onclick = function(){// 激活此时点击的h3和 ulif(this.className == ''){// 打印出此时的自定义索引值console.log(this.index);// 将对应的ul显示出来ul[this.index].style.display = 'block';// 改变小图标img[this.index].src = './images/ico2.gif';// 将h3设为激活状态this.className = 'active';}else{// 不激活 h3, 则隐藏ulul[this.index].style.display = 'none';// 改变小图标img[this.index].src = './images/ico1.gif';// 取消active设置this.className = '';}}}</script>
</body>
</html>

【Javascript】入门之QQ列表的实现相关推荐

《jQuery与JavaScript入门经典》——第 1 章　动态Web编程简介 1.1理解Web服务器浏览器范式...
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第1章,第1.1节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
JavaScript入门笔记
第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符第二章 JavaScript流程控制语句 2.1 循 ...
[转载] javascript入门_WebAssembly入门-仅使用14行JavaScript
参考链接: WebAssembly-使用Rust by Daniel Simmons 丹尼尔·西蒙斯(Daniel Simmons) WebAssembly入门-仅使用14行JavaScript (G ...
JavaScript入门 Day1
课程介绍编程语言介绍(了解) JavaScript简介(了解) JavaScript入门运算符(掌握) JavaScript基本语法(掌握) 位运算符(了解) 1.编程语言 1.1.什么是编程语言 ...
jQuery实现防QQ列表好友分组
1)在显示当前div之前, 先隐藏其他div 2)交替切换被选元素的隐藏和显示效果如下: 主要方式是通过jQuery查找点击的标签所属的tr,再找其同级元素,再查找div,并进行隐藏,而点击的对象 ...
JavaScript入门基础知识
JavaScript入门基础学习 1.三种引用JavaScript的方式 1.1行内式 <input type = "button" value="点我试试&quo ...
简易QQ列表展开收缩
翻出之前做的小练习–原生JS实现QQ列表展开收缩功能 1 每次点击一级菜单,展开对应的二级菜单,则收起其他一级菜单和对应的二级菜单,并且清除被点击过的二级菜单的背景颜色 2 a,第一点击二级菜单里的 ...
HTML+CSS+JavaScript入门教程（万字）
前言作为一名后端开发人员,开发过程中,必不可少的与前端进行对接,因此尽管是后端开发者,也需要一定的前端知识,因此写下HTML+CSS+JavaScript入门知识,着重介绍了JavaScript,方 ...
HTML、XHTML、CSS与JavaScript入门经典pdf
下载地址:网盘下载内容介绍: 自从网站诞生以来,用于构建网站的语言就一直在不断地演化.现在一系列最佳实践已经出现,使用HTML或XHTML创建基本的网页,使用CSS控制它们的外观并使它们更加引人注目 ...
无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(521711109) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

【Javascript】入门之QQ列表的实现

描述: 点击朋友/家人/陌生人, 显示/收起对应列表

代码实现:

【Javascript】入门之QQ列表的实现相关推荐

最新文章

热门文章