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 切换颜色的更多相关文章

  1. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

  2. js 点击列表li,获得当前li的id

    html <ul id="demo"> <li id="li-1">li1</li> <li id="li- ...

  3. JS点击更换网页背景颜色

    JS部分 <script type="text/javascript"> // 定义可换的颜色 var colors = ["#ff0000", & ...

  4. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  5. 怎么用js设置a标签点击链接改变当前颜色

    怎么用js设置a标签点击链接改变当前颜色 20 例如:多个a标签为白色,当点击其中一个a标签时改变那一个a标签的字体颜色为黄色,并且跳转到对应链接,当点击下一个a标签链接时,下一个为黄色,之前一个恢复 ...

  6. vue点击切换颜色限制个数(用了mui框架)

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  7. js如何实现动态点击改变单元格颜色?

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

  8. 使用jQuery实现点击左右滑动切换特效

    使用jQuery实现点击左右滑动切换特效: HTML代码如下: <!--整体背景div--> <div class="warp"> <!--中间内容d ...

  9. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

随机推荐

  1. 【POJ - 3009】Curling 2.0 (dfs+回溯)

    -->Curling 2.0 直接上中文 Descriptions: 今年的奥运会之后,在行星mm-21上冰壶越来越受欢迎.但是规则和我们的有点不同.这个游戏是在一个冰游戏板上玩的,上面有一个正 ...

  2. Codeforces Round #594 (Div. 2)(A/B/C)

    A. Integer PointsDescription DLS and JLS are bored with a Math lesson. In order to entertain themsel ...

  3. 应用安全 - 工具|框架 - Java - Jenkins - 漏洞 - 汇总

    未授权访问 /script /manage/asynchPeople//config.xml CVE-2015-8103 Date 2015.11 类型反序列化导致远程命令执行 影响范围Jenkins ...

  4. C++之用程序理解浅拷贝

    C++中的浅拷贝是产生很多问题的根本原因,其根本原因是在有指针的时候,只是拷贝了一个指针的值,多个指针指向同一块内存区域,当free内存时,造成其他指针指向的空间不存在.结合构造函数和析构函数理解浅拷 ...

  5. channel 介绍

    !!!1.Memory Channel 内存通道 事件将被存储在内存中的具有指定大小的队列中. 非常适合那些需要高吞吐量但是失败是会丢失数据的场景下.   属性说明: !type – 类型,必须是“m ...

  6. linux静态IP配置和网关配置

    我们在配置CentOS的时候,很多情况需要能联外网,那么就需要DNS解析功能,默认的是没有配置DNS信息的,所以我们得配置DNS信息起因我们在搜索Centos配置DNS信息的时候,很多都是说在这个文件 ...

  7. pikachu-SQL注入

    参考网址: http://www.mamicode.com/info-detail-2795438.html

  8. vim配置及插件安装笔记

    1. 首先打开vim的配置文件vimrc,并加入以下常用的配置: cd ~ mkdir .vim vim .vimrc " 设置当文件被改动时自动载入 set autoread " ...

  9. Python中的 _init__和 _new__的区别

    使用python 的面向对象写过程序之后,相信童鞋对 __init__ 方法已经非常的熟悉了.这个方法通常是 在初始化一个实例的时候使用的. 例如: class MysqlConnector(obje ...

  10. maven的配置以及使用

    1.下载并配置 下载之后解压,并配置系统环境变量(网上的方法很多),配置maven的环境变量之前确保java的环境变量已经配置成功. 2.eclipse安装maven插件 eclipse安装maven ...