js实现qq好友分组

qq好友分组

 <style>ul,h2 {padding: 0;margin: 0;background-color: wheat;}li {list-style: none;}#list {width: 240px;margin: 0 auto;}#list h2 {height: 30px;line-height: 30px;text-indent: 20px;background: url('img/ico1.gif') no-repeat 5px center;cursor: pointer;}#list .active {background: url('img/ico2.gif') no-repeat 5px center;}#list ul {display: none;}#list ul li {line-height: 24px;text-indent: 24px;background-color: pink;}</style>
</head><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>
<script type="text/javascript">window.onload = function () {var list = document.getElementById('list');var h2 = list.getElementsByTagName('h2');var ul = list.getElementsByTagName('ul');for (var i = 0; i < h2.length; i++) {h2[i].index = i;h2[i].onclick = function () {if (this.className == '') {ul[this.index].style.display = 'block';this.className = 'active';} else {ul[this.index].style.display = 'none';this.className = '';}}}}</script>

效果图

js实现qq好友分组相关推荐

模仿QQ好友分组风格
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
IOS 实现QQ好友分组展开关闭功能
贴出核心代码主要讲一下思路. - (void)nameBtnClick:(myButton *)sender { //获取当前点击的分组对应的section self.clickIndex = s ...
html仿qq最小化怎么实现,JS仿QQ好友列表展开、收缩功能(第一篇)
JS仿QQ好友列表展开.收缩功能(第一篇) 发布时间:2020-10-17 14:20:03 来源:脚本之家阅读:96 作者:erdouzhang 效果图如下所示: html: 我的好友张三李四 ...
Qt可拖拽排序表格（类似QQ好友分组排序）
1,简介为了最佳体验,一个拖拽行排序的功能研究了几个小时.效果参考的QQ好友分组的排序. 网上查了下好像没有人发布QT版类似的代码,于是自己动手 QQ好友分组排序效果: 2,效果这是最终效果图,有 ...
QQ好友分组模拟小程序
QQ好友分组:一个好友组里有多个好友,一个好友只能选择一个组,这样好友组和好友之间就是一个一对多的关系.在此程序中封装一个好友类即Buddy类,一个组类即Group类.在Buddy类有有关好友的最基本 ...
expandableListview的使用，模仿qq好友分组点击收缩扩展
我主要讲述的是用listview实现.模仿qq好友分组点击收缩.扩展功能这个是对listview的拓展,用法比较相似,还是需要一个适配器 MainActivitypublic class MainA ...
Android之实现QQ好友分组(ExpandableListView)
在项目开发中,也许我们遇到过ListView中嵌套ListView,但谷歌建议我们最好别这样做,因此他们写好了一个ExpandableListView类,他继承ListView,可以实现ListVie ...
UITableView的折叠收缩和QQ好友分组效果
可折叠展开的tableView,QQ好友分组列表 demo下载地址https://github.com/zhengwenming/ExpandTableView 原理分析:这个可以折叠的table ...
Qt可拖拽排序表格（解决滚动条不兼容问题，类似QQ好友分组排序）
原版链接 https://blog.csdn.net/dpsying/article/details/77206127 Qt可拖拽排序表格(类似QQ好友分组排序) 感谢博主无私分享修改后,解决了滚动 ...

js实现qq好友分组

qq好友分组

js实现qq好友分组相关推荐

最新文章

热门文章