js点击列表文字对应该行显示背景颜色的实现代码
本文实例讲述了js点击列表文字,实现该行文字显示背景颜色的方法。分享给大家供大家参考。具体如下:
JS控制li,鼠标点击时class自动加上,给列表文字产生自己喜欢的背景色的网页特效。
运行效果图如下:
<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程序设计有所帮助。
相关推荐
-
JS Range HTML文档/文字内容选中、库及应用介绍
一.前面的些话 本文的内容基本上是基于"区域范围对象(Range objects)"这个概念来说的.这个玩意,可以让你选择HTML文档的任意部分,并可以拿这些选择的信息做你想做的事情.其中,最常见的Range是用户用鼠标选择的内容(user selection). 本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象. 二.什么是Range? 所谓"Range",是指HTML文档中任意一段内容.一个Range
-
JS实现单行文字不间断向上滚动的方法
本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} HTML: 复制代码 代码如下:
-
JS实现让访问者自助选择网页文字颜色的方法
本文实例讲述了JS实现让访问者自助选择网页文字颜色的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现让访问者自助选择网页的文字颜色</title> <script language="javascript"> <!-- function chColor(c){ document.body.style.color = c; } //--> </script>
-
js设置文字颜色的方法示例
本文实例讲述了js设置文字颜色的方法.分享给大家供大家参考,具体如下: <h1>aaabbbccc</h1> 不允许在h1标签中添加任何字符,可以通过css或js定义,使其aaa为红色bbb为黄色ccc为蓝色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&
-
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现文字链接感应鼠标淡入淡出改变颜色</TITLE> </HEAD> <BODY> <script l
-
神奇!js+CSS+DIV实现文字颜色渐变效果
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati
-
浅析js 文字滚动效果
这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st
-
javascript自动改变文字大小和颜色的效果的小例子
复制代码 代码如下: <body bgcolor="#000000"> <div id="text" style="font-size:20px;">你好,这是一段改变文字大小和颜色的javascript代码</div> <script type="text/javascript"> var size = 20; var falg = 1; function col
-
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. 复制代码 代码如下: <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascri
-
JS实现改变HTML上文字颜色和内容的方法
本文实例讲述了JS实现改变HTML上文字颜色和内容的方法.分享给大家供大家参考,具体如下: 1. JavaScript <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 1 </TITLE> <META NAME="Generator" CONTENT="EditP
-
RGB颜色值转HTML十六进制(HEX)代码的JS函数
复制代码 代码如下: //转到固定长度的十六进制字符串,不够则补0 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } //妈的,怎么都没搜到怎么用javascript找出一个背景色的数值,只好自己解析 function rgb2hex(rgb) { //nnd, Firefox / IE not the
-
Js 打字效果 逐一出现的文字
第一种:打印多个文字 逐个出现的文字 var layers =document.layers,style=document.all,both=layers||style,idme=908601; if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = '.style';} function writeOnText(obj,str){ if(layers)wit
随机推荐
- 2017年最好用的9个php开发工具推荐(超好用)
- 正则文本框只能输入正整数
- LiteSpeed服务器用htaccess的防盗链代码
- SpringBoot项目打包三方JAR的示例代码
- Struts中action线程安全问题解析
- python直接访问私有属性的简单方法
- JavaScript小技巧整理
- JavaScript如何自定义trim方法
- 深入了解PHP中的Array数组和foreach
- 服务器上配置PHP运行环境教程
- 如何实现表格中行点击时的渐扩效果!
- Linux磁盘空间被未知资源耗尽的解决方法
- 谈谈Android Fragments 详细使用
- 加载 Javascript 最佳实践
- IE与FireFox的兼容性问题
- jQuery取消特定的click事件
- 使用jQuery加载html页面到指定的div实现方法
- jquery 获取 outerHtml 包含当前节点本身的代码
- Android 开发实例简单涂鸦板
- 使用RxJava中遇到的一些”坑“