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 相关文章推荐
JavaScript 以对象为索引的关联数组
May 19 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
react redux入门示例
Apr 19 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JavaScript实现轮播图特效
Apr 10 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
详解Django中的form库的使用
2015/07/18 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
python中如何写类
2020/06/29 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
年终自我鉴定
2013/10/09 职场文书
优乐美广告词
2014/03/14 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
《角的度量》教学反思
2016/02/18 职场文书