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 相关文章推荐
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
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
文件上传类
2006/10/09 PHP
关于PHP中的Class的几点个人看法
2006/10/09 PHP
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
JS动画效果代码3
2008/04/03 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
python实现按任意键继续执行程序
2016/12/30 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Django中url的反向查询的方法
2018/03/14 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
电子商务专业毕业生自荐书
2014/06/22 职场文书
商务英语专业求职信
2014/06/26 职场文书
ktv好的活动方案
2014/08/15 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
校长一岗双责责任书
2015/05/09 职场文书
同意转租证明
2015/06/24 职场文书
初二数学教学反思
2016/02/17 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Django使用redis配置缓存的方法
2021/06/01 Redis
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python