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 相关文章推荐
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
vue-loader教程介绍
Jun 14 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
jQuery实现tab栏切换效果
Dec 22 jQuery
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
url decode problem 解决方法
2011/12/26 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php类常量用法实例分析
2015/07/09 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
document.all与WEB标准
2020/05/13 Javascript
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Python入门篇之条件、循环
2014/10/17 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
基于python socketserver框架全面解析
2017/09/21 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Python实现的端口扫描功能示例
2018/04/08 Python
Python读取指定日期邮件的实例
2019/02/01 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
庆七一活动方案
2014/01/25 职场文书
门前三包责任书
2014/04/15 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
公司放假通知范文
2015/04/14 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang