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> ...
随机推荐
- Django与Session
Session Session的由来 Cookie虽然在一定程度上解决了"保持状态"的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能 ...
- 【DSP开发】【计算机视觉】TI 视觉软件开发套件ADAS
关键字:TI 视觉软件开发套件 ADAS 日前,德州仪器 (TI) 宣布推出其视觉软件开发套件(SDK),从而为开发人员提供了一款灵活的框架.一组丰富齐全的硬件设备驱动程序和一套适用的开发工具,可 ...
- 【Python开发】Url中文字符时记得转码edcode("utf-8")
在url中使用中文其实是一个坏习惯,会带来一系列的转码问题, 我更喜欢英文译名或者id来标识某个uri.但是现实往往是残酷的, 特别是在我们调用别人服务时候,有时候被逼无奈使用中文URL. Pytho ...
- 解决VS2008之后平台(如VS2012/VS2013/VS2015)调试模式下不显示主界面窗口的问题
问题描述:win10操作系统下,VS2008工程调试模式下正常显示主界面窗口,使用VS2012/VS2013/VS2015环境打开VS2008工程,调试模式下应用程序转为后台进程,不显示主界面窗口:另 ...
- 关于Java中excel表格导出的总结(Java程序导出模板和Java根据模板导出表格两种实现方式)
导出excel通用模板(程序定义模板导出) 转载原文:https://www.jianshu.com/p/5c7b359a159c 如下代码,本方法主要用于程序定义模板格式,并导出文件.该方法将定义和 ...
- 牛客小白月赛14 -G (筛法)
题目链接:https://ac.nowcoder.com/acm/contest/879/G 题意:给定A1和A数组公式: 以及B数组: 求 思路:利用筛法更新b数组,最后求异或和即可. AC代码: ...
- Exclusive Time of Functions
On a single threaded CPU, we execute some functions. Each function has a unique id between 0 and N- ...
- POJ - 3469 Dual Core CPU (最小割)
(点击此处查看原题) 题意介绍 在一个由核A和核B组成的双核CPU上执行N个任务,任务i在核A上执行,花费Ai,在核B上执行,花费为Bi,而某两个任务之间可能需要进数据交互,如果两个任务在同一个核上执 ...
- 使用Python基于百度等OCR API的文字识别
百度OCR Baidu OCR API:一定额度免费,目前是每日500次 Python SDK文档:https://cloud.baidu.com/doc/OCR/OCR-Python-SDK.htm ...
- luogu P3320 [SDOI2015]寻宝游戏
大意:给定树, 要求维护一个集合, 支持增删点, 询问从集合中任取一点作为起点, 遍历完其他点后原路返回的最短长度. 集合中的点按$dfs$序排列后, 最短距离就为$dis(s_1,s_2)+...+ ...