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 相关文章推荐
jquery判断浏览器类型的代码
Nov 05 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
layui清空,重置表单数据的实例
Sep 12 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
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
asp.net和php的区别点总结
2019/10/10 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
node.js入门教程
2014/06/01 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python smallseg分词用法实例分析
2015/05/28 Python
Python中for循环控制语句用法实例
2015/06/02 Python
Python自动生产表情包
2017/03/17 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
Python3.6简单反射操作示例
2018/06/14 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
村委会换届选举方案
2014/05/03 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
工作会议简报
2015/07/20 职场文书
三八节祝酒词
2015/08/11 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL