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. Java工程师研发面经大合集

    百度研发面经整合版 软件研发工程师 基础研发工程师 百度智能云 百度核心搜索部 百度今年的提前批有点奇怪,好像都不走流程,牛客上好几个百度内推的帖子,我投了几个,基本上都是百度智能云的,当然也有其他部 ...

  2. LinuxC/C++基础——引用

    1.引用(Reference) 1.1引用的基本语法 引用是C++对C的重要扩充,也存在与其他一些编程语言中,并不是C++的发明.通过引用,C++增加了 另外一种给函数传递地址的途径,这就是按引用传递 ...

  3. VS显示代码行号

    工具>文本编辑器>常规    如图勾选行号选项,点击确定即可显示行号. 如果没有行号的选项,则需先勾选下图中左下角的‘’显示所有设置选‘’‘项.

  4. AI 资源帖

    https://github.com/mnielsen/neural-networks-and-deep-learning openCV笔记 https://blog.csdn.net/qq_2689 ...

  5. 引用Nuget包Microsoft.EntityFrameworkCore.Tools.DotNet报错

    错误如下 解决方法 使用VS2017或更高版本在改项目右键,选择“编辑xxx.csproj”,并添加如下一句话,就可以成功引用改Nuget包 <PackageReference Include= ...

  6. PHP 调用shell命令

    可以使用的命令: popenfpassthrushell_execexecsystem 1.popen resource popen ( string command, string mode ) 打 ...

  7. PTA(Basic Level)1024.科学计数法

    科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...

  8. Entity Framework常用方法及案例

    ⒈Skip(int count) 说明:跳过集合的前n个元素:延迟.即我们跳过给定的数目返回后面的结果集. ⒉Take(int count) 说明:获取集合的前n个元素:延迟.即只返回限定数量的结果集 ...

  9. 概率DP(放棋子)Domination

    题意:https://zoj.pintia.cn/problem-sets/91827364500/problems/91827369874 给你n*m的棋盘,我们定义放满棋盘是:任意一行一列至少有一 ...

  10. QQ登錄實現功能

    <html> <head> <title></title> </head> <body> <form> <p& ...