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. PHP curl出现SSL certificate problem: self signed certificate in certificate chain

    使用PHP curl请求https的时候出现错误“SSL certificate problem: self signed certificate in certificate chain”,这种情况 ...

  2. Python学习之初识

    第一章 1.1 typora 的安装与使用 1.1.1 标题的创建: 方法一:用 ###+空格 表示标题,几个#就是几级标题 方法二:菜单栏-->段落-->选择标题 1.1.2 有序列表与 ...

  3. C# AE 通过要素类工作空间将shp路径string类型对象转换为IFeatureClass;

    IWorkspaceFactory pWorkspaceFactory = new ShapefileWorkspaceFactoryClass();//打开shapefile工作空间openFile ...

  4. CentOS7中yum配置

    1.打开centos的yum文件夹 输入命令cd  /etc/yum.repos.d/ 2.用wget下载repo文件 输入命令wget  http://mirrors.aliyun.com/repo ...

  5. Leetcode之动态规划(DP)专题-64. 最小路径和(Minimum Path Sum)

    Leetcode之动态规划(DP)专题-64. 最小路径和(Minimum Path Sum) 给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. ...

  6. 华为HCNA乱学Round 9:VRRP

  7. 用grok拆分java日志

    1.假设一行日志内容如下: [root@VM_0_92_centos opt]# cat error.log -- ::,[ERROR ajp-nio--exec-](cn.com.al1.compo ...

  8. [转帖]How does a CPU work?

    How does a CPU work? https://milapneupane.com.np/2019/07/06/how-does-a-cpu-work/ CPU, also known as ...

  9. ZooKeeper原理及介绍

    Zookeeper简介 1.1 什么是Zookeeper ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是大数据生态中的重要组件.它是 ...

  10. ETL初探

    初识ETL 概念 ETL即Extract-Transform-Load.目的是将分散.凌乱.异质的数据整合在一起,为决策提供分析数据,是BI项目(Business Intellifence)项目中重要 ...