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对象之JS入门之Array对象操作小结
Jan 09 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 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
php读取csv数据保存到数组的方法
2015/01/03 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python实现两张图片的像素融合
2019/02/23 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
python3访问字典里的值实例方法
2020/11/18 Python
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
自动化系在校本科生求职信
2013/10/23 职场文书
经济担保书范文
2014/04/02 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
教师读书笔记
2015/06/29 职场文书
入党后的感想
2015/08/10 职场文书