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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
JS中的BOM应用
Feb 02 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
react国际化react-intl的使用
May 06 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模板技术原理【一】
2008/01/10 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
Python求解平方根的方法
2015/03/11 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
工程造价专业大学生职业规划范文
2014/03/09 职场文书
入党综合考察材料
2014/06/02 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
办公室管理规章制度
2015/08/04 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏