js点击列表文字对应该行显示背景颜色的实现代码


Posted in Javascript onAugust 05, 2015

本文实例讲述了js点击列表文字,实现该行文字显示背景颜色的方法。分享给大家供大家参考。具体如下:
 JS控制li,鼠标点击时class自动加上,给列表文字产生自己喜欢的背景色的网页特效。
 
运行效果图如下:

js点击列表文字对应该行显示背景颜色的实现代码

<style type="text/css">
li{cursor:pointer;}
.cur{background:red;}
</style>
<script type="text/javascript">
window.onload = function ()
{
 var aLi = document.getElementsByTagName("li");
 var i = 0; 
 for (i = 0; i < aLi.length; i++)
 { 
 aLi[i].onclick = function ()
 {
  for (i = 0; i < aLi.length; i++) aLi[i].className = "";
  this.className = "cur";
 };
 }
};
</script>
<div class="clMenu">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
详解Vue前端对axios的封装和使用
Apr 01 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 #Javascript
js绘制圆形和矩形的方法
Aug 05 #Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 #Javascript
JS版元素周期表实现方法
Aug 05 #Javascript
javascript实现手机震动API代码
Aug 05 #Javascript
JS实现生成会变大变小的圆环实例
Aug 05 #Javascript
JavaScript计算某一天是星期几的方法
Aug 05 #Javascript
You might like
用PHP函数解决SQL injection
2006/12/09 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
详细探究Python中的字典容器
2015/04/14 Python
Python 性能优化技巧总结
2016/11/01 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python验证码识别的示例代码
2017/09/21 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Python txt文件如何转换成字典
2020/11/03 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
Python道路车道线检测的实现
2021/06/27 Python