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> ...
随机推荐
- sshpass密码
使用sshpass sshpass -p "password" scp -r user@example.com:/some/remote/path /some/local/path ...
- Vue组件中的data属性
Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...
- 从内存上看python的对象
python中有一个说法:一切皆是对象,怎么理解这句话呢?我们可以通过查看数字,字符串在内存中的表示形式来对这句话有个更深的认识. 那么,怎么查看对象在内存中是什么样的呢?可以先参考一些这篇文章:ht ...
- Android开发 互相调用模式之C#主导
首先明确一个概念,当我们不使用Android Studio提供的那些包,仅仅是Unity打包apk,打包出来的apk里面也包含了SDK (1)首先删除Unity下我们创建的Plugins文件夹,因为这 ...
- zabbix支持的主要监控方式
一.zabbix支持的主要监控方式: zabbix主要Agent,Trapper,SNMP,JMX,IPMI这几种监控方式,本文章主要通过监控理论和实际操作测试等方式来简单介绍这几种方式的监控原理和优 ...
- 【神经网络与深度学习】【C/C++】ZLIB学习2
Zlib文件压缩和解压 开源代码:http://www.zlib.net/ zlib使用手册:http://www.zlib.net/manual.html zlib wince版:http://ww ...
- sqlalchemy映射数据库
from sqlalchemy import create_engine,Column,Integer,String from sqlalchemy.ext.declarative import de ...
- analyticdb(ADB) group by 用法小结
虽说analyticdb(ADB)是支持mysql协议的,但有些具体细节用法是有些区别. 1.group by 字段 mysql group by select id,title,describe w ...
- [转帖]CentOS 7安装并启动Google浏览器(★firecat亲测有效★)
CentOS 7安装并启动Google浏览器(★firecat亲测有效★) https://blog.csdn.net/libaineu2004/article/details/82821405 自己 ...
- Series与list
一.索引 1.1 索引顺序 list的索引为从0到n-1.不可更改索引. Series的索引:如果未定义为从0到n-1.如果定义,则为定义的索引,一旦定义完成,索引对象将不可更改.但是索引是可以改变的 ...