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程序设计有所帮助。

赞 (0)

相关推荐

  • JS Range HTML文档/文字内容选中、库及应用介绍

    JS Range HTML文档/文字内容选中、库及应用介绍

    一.前面的些话 本文的内容基本上是基于"区域范围对象(Range objects)"这个概念来说的.这个玩意,可以让你选择HTML文档的任意部分,并可以拿这些选择的信息做你想做的事情.其中,最常见的Range是用户用鼠标选择的内容(user selection). 本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象. 二.什么是Range? 所谓"Range",是指HTML文档中任意一段内容.一个Range

  • JS实现改变HTML上文字颜色和内容的方法

    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

  • 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设置文字颜色的方法.分享给大家供大家参考,具体如下: <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&

  • 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

  • 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

  • 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

  • 神奇！js+CSS+DIV实现文字颜色渐变效果

    神奇！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实现让访问者自助选择网页文字颜色的方法

    本文实例讲述了JS实现让访问者自助选择网页文字颜色的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现让访问者自助选择网页的文字颜色</title> <script language="javascript"> <!-- function chColor(c){ document.body.style.color = c; } //--> </script>

  • 浅析js 文字滚动效果

    这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st

  • JS实现文字链接感应鼠标淡入淡出改变颜色的方法

    本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现文字链接感应鼠标淡入淡出改变颜色</TITLE> </HEAD> <BODY> <script l

  • 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

随机推荐