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中两个感叹号的作用说明
Dec 28 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
vscode 调试 node.js的方法步骤
Sep 15 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 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中PIL安装简单教程
2016/04/21 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python中按键来获取指定的值
2019/03/02 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
pandas中ix的使用详细讲解
2020/03/09 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
英文简历中的自我评价
2013/10/06 职场文书
建筑专业自我鉴定
2013/10/22 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
2014年采购员工作总结
2014/11/18 职场文书
爱心助学感谢信
2015/01/21 职场文书
房地产项目合作意向书
2015/05/08 职场文书
信仰观后感
2015/06/03 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python