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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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环境搭建最新方法
2006/09/05 PHP
使用php来实现网络服务
2009/09/15 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php制作动态随机验证码
2015/02/12 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
Python 函数基础知识汇总
2018/03/09 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
如何查找和删除数据库中的重复数据
2014/11/05 面试题
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
教育孩子心得体会
2014/01/01 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
人民调解员培训方案
2014/06/05 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
教师辞职书范文
2015/02/26 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Redis实战高并发之扣减库存项目
2022/04/14 Redis
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL