js 点击不同li 切换颜色
html
<div>
<li class="m-li" id="" onclick='addColor(this.id)'>
会议简介
</li>
<li class="m-li" id="" onclick='addColor(this.id)'>
会议议程
</li>
<li class="m-li" id="" onclick='addColor(this.id)'>
会议嘉宾
</li>
</div>
js
function addColor(x)
{
let list=document.getElementsByTagName('li')
for(let p=list.length;p--;){
if(list[p].id!=x){
list[p].classList.remove("personal");
}
else {
/*点击的*/
list[p].classList.add("personal");
}
}
}
css
.personal {
color: #3A99FF;
}
js 点击不同li 切换颜色的更多相关文章
- 极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...
- js 点击列表li,获得当前li的id
html <ul id="demo"> <li id="li-1">li1</li> <li id="li- ...
- JS点击更换网页背景颜色
JS部分 <script type="text/javascript"> // 定义可换的颜色 var colors = ["#ff0000", & ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 怎么用js设置a标签点击链接改变当前颜色
怎么用js设置a标签点击链接改变当前颜色 20 例如:多个a标签为白色,当点击其中一个a标签时改变那一个a标签的字体颜色为黄色,并且跳转到对应链接,当点击下一个a标签链接时,下一个为黄色,之前一个恢复 ...
- vue点击切换颜色限制个数(用了mui框架)
vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
- js如何实现动态点击改变单元格颜色?
js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...
- 使用jQuery实现点击左右滑动切换特效
使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...
- js用户管理中心tab切换界面模板
效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...
随机推荐
- 将序列化成json格式后日期(毫秒数)转成日期格式
System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaS ...
- KCP - A Fast and Reliable ARQ Protocol
KCP - A Fast and Reliable ARQ Protocol README in English 简介 KCP是一个快速可靠协议,能以比 TCP浪费10%-20%的带宽的代价,换取平均 ...
- Cannot get a NUMERIC value from a STRING cell? 已解决
最近在写项目中用到了excel的导入,遇到了Cannot get a NUMERIC value from a STRING cell的报错.原因是无法从纯数字的单元格用获取String的方式获取.跟 ...
- mysql——插入、更新、删除数据(示例)
插入数据 一.前提,新建表: ), sname ), sage ), ssex ) ); select * from student; 二.多种方式插入数据: ','zhaolei','1990-01 ...
- selenium爬虫后上传数据库。
一.准备工作 1.1安装软件 安装python.安装谷歌浏览器.将chromedriver.exe放到指定位置.放到Scripts文件夹中.我这边的路径为:C:\Users\1\AppData\Loc ...
- reids集群状态正常redis.clients.jedis.exceptions.JedisNoReachableClusterNodeException: No reachable node in cluster
重新启动redis集群时启动失败,报错: redis.clients.jedis.exceptions.JedisNoReachableClusterNodeException: No reachab ...
- HDU3336 Count the string(kmp
It is well known that AekdyCoin is good at string problems as well as number theory problems. When g ...
- QQ登錄實現功能
<html> <head> <title></title> </head> <body> <form> <p& ...
- 如何不用 transition 和 animation 也能做网页动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BxbQJj 可交互视频教 ...
- pip 更新命令
更新pip的命令 https://pip.pypa.io/