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 相关文章推荐
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
javascript 面向对象 function类
2010/05/13 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python实现包含min函数的栈
2016/04/29 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python通过字典映射函数实现switch
2020/11/06 Python
Python学习之time模块的基本使用
2021/01/17 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
什么是唯一索引
2015/07/05 面试题
恶意软件的定义
2014/11/12 面试题
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
三下乡活动方案
2014/01/31 职场文书
火车来了教学反思
2014/02/11 职场文书
大学军训感言1000字
2014/02/25 职场文书
大学毕业晚会开场白
2015/05/29 职场文书