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 相关文章推荐
解密效果
Jun 23 Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
详解python3中的真值测试
2018/08/13 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
Python常用断言函数实例汇总
2020/11/30 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
思想汇报范文
2013/11/04 职场文书
公司晚会主持词
2014/03/22 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫