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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
JS 判断undefined的实现代码
Nov 26 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
Node调用Java的示例代码
Sep 20 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
微信小程序实现文件预览
Oct 22 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
Angular工具方法学习
2016/12/26 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python hashlib加密实现代码
2019/10/17 Python
python 元组的使用方法
2020/06/09 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
大学生求职简历的自我评价
2013/10/14 职场文书
矫正人员思想汇报
2014/01/08 职场文书
银行存款证明样本
2014/01/17 职场文书
岗位说明书怎么写
2014/07/30 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
单位综合评价意见
2015/06/05 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
详解在OpenCV中如何使用图像像素
2022/03/03 Python
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript