js练习好友列表选择

在好友列表里，选中项变色，其他项恢复原色，鼠标移入选项时变色，移出时除了选中项恢复原色

<html>
<head>
<meta charset="utf-8">
<title>好友列表选择</title>
<style type="text/css">*{ margin:0 auto; padding:0;}#wai{ width:220px; height:600px; margin-top:50px;}.friends{ width:200px; height:30px; background-color:#00F; margin-top:5px; text-align:center; line-height:30px; color:#fff;}.friends:hover{ cursor:pointer;}
</style>
</head><body><div id="wai"><div class="friends" xz="0">曹操</div><div class="friends" xz="0">刘备</div><div class="friends" xz="0">孙权</div><div class="friends" xz="0">诸葛亮</div><div class="friends" xz="0">司马懿</div><div class="friends" xz="0">周瑜</div><div class="friends" xz="0">关羽</div><div class="friends" xz="0">张辽</div><div class="friends" xz="0">甘宁</div></div>
</body>
</html>
<script type="text/javascript">var f = document.getElementsByClassName("friends");/*点击选中变色，其他选项恢复原色，自定义属性xz的值变为1，其他选项恢复为0*/for(var i=0;i<f.length;i++){f[i].onclick = function(){for(var i=0;i<f.length;i++){f[i].style.backgroundColor = "#00F";f[i].setAttribute("xz","0");}this.style.backgroundColor = "#F60";this.setAttribute("xz","1");}}/*鼠标移入选项变色*/for(var i=0;i<f.length;i++){f[i].onmouseover = function(){this.style.backgroundColor = "#F60";}}/*鼠标移出根据自定义属性xz的值判断，xz=1移出不变色，xz=0移出恢复原色*/for(var i=0;i<f.length;i++){f[i].onmouseout = function(){var xz = parseInt(this.getAttribute("xz"));if(xz==1){this.style.backgroundColor = "#F60";}else if(xz==0){this.style.backgroundColor = "#00F";}}}
</script>

效果初始

　　　　选中变色

转载于:https://www.cnblogs.com/zxbs12345/p/8005803.html

js练习好友列表选择相关推荐

qq好友列表html页面,动态爬虫之QQ好友列表
步骤 1.分析qzone请求 2.分析参数来源 3.仿照数据请求上次写的一个qzone登陆写的不详细这次决定写一个详细分析qzone js 获取好友列表分析qzone请求我们的好友列表要从 qz ...
qq好友列表获取之动态爬虫清洗爬取好友列表数据 - 获取qq好友、群、群成员列表
qq好友列表获取之动态爬虫清洗爬取qq好友列表数据 - 获取qq好友ip.群.群成员列表.我们的好友列表要从 qzone 获取,现在打开 qzone 的链接 https://h5.qzone.qq.c ...
html仿qq最小化怎么实现,JS仿QQ好友列表展开、收缩功能(第一篇)
JS仿QQ好友列表展开.收缩功能(第一篇) 发布时间:2020-10-17 14:20:03 来源:脚本之家阅读:96 作者:erdouzhang 效果图如下所示: html: 我的好友张三李四 ...
原生JS获取QQ好友列表
JS内容如下: /*** @author ius.* @date 2022/8/1* @introduction 获取QQ好友列表*/function getCookie(aim) {const al ...
qq列表展开多个html代码,JS仿QQ好友列表展开、收缩功能(第二篇)
在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: window.onload = function(){ var list = document.get ...
js解密之QQ的bkn值，获取QQ群成员信息，获取QQ好友列表信息
js解密之QQ的bkn值,获取QQ群成员信息,获取QQ好友列表信息 Lan 2020-05-31 12:13 126 人阅读 0 条评论 QQ群网站:https://qun.qq.com ...
python爬取qq邮箱_使用Python模拟登录QQ邮箱获取QQ好友列表
最近因开发项目的需要,有一个需求,就是很多SNS网站都有的通过 Email地址导入好友列表,不过这次要导入的不是Email 列表,而是QQ的好友列表. 实现方式: 通过google一搜,实现的方式大 ...
python获取qq好友ip_使用Python模拟登录QQ邮箱获取QQ好友列表
最近因开发项目的需要,有一个需求,就是很多SNS网站都有的通过 Email地址导入好友列表,不过这次要导入的不是Email 列表,而是QQ的好友列表. 实现方式: 通过google一搜,实现的方式大 ...
python模拟登录qq获取好友信息_使用Python模拟登录QQ邮箱获取QQ好友列表
最近因开发项目的需要,有一个需求,就是很多SNS网站都有的通过 Email地址导入好友列表,不过这次要导入的不是Email 列表,而是QQ的好友列表. 实现方式: 通过google一搜,实现的方式大 ...

js练习好友列表选择

js练习好友列表选择相关推荐

最新文章

热门文章

js练习 好友列表选择

js练习 好友列表选择相关推荐

最新文章

热门文章

js练习好友列表选择

js练习好友列表选择相关推荐