今天项目遇到了标题所说的问题，找到一篇很高效的例子，值得学习。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

 <head>

     <title>Change.html</title>

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <style>

         body li{

             list-style-type: none;

         }

     </style>

 </head>

 <body>

 <li onclick='g(this.id)' id=w><small>文字</small></li><br>

 <li onclick='g(this.id)' id=i><small>文字</small></li><br>

 <li onclick='g(this.id)' id=y><small>文字</small></li><br>

 <script type=text/javascript>

     function g(x)

     {

         d=document.getElementsByTagName('li')

         for(p=d.length;p--;){

             if(d[p].id!=x){d[p].style.backgroundColor='#FFFFFF'/*其他*/}

             else{d[p].style.backgroundColor='#D2D2D2'/*点击的*/} 
         } 
      }
 </script>  </body>  </html>

一个简单的for循环就解决了我写了一大堆的问题！

声明：本例子是在网上找到的一个例子，如有侵权请与我联系 邮箱：1783096984@qq.com

js实现点击ul/li等改变背景颜色的更多相关文章

  1. js：for循环ul/li，获取当前被点击元素的id，以及给其他li设置属性

    js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta char ...

  2. iOS 创建多个button实现点击改变背景颜色

    工程中需要实现与UISegmentedControl效果相似的一排一共十个button,如下图.但是SegmentedControl修改不太方便,就用button替代, 循环创建十个button,点击 ...

  3. [JS9] document's bgColor改变背景颜色

    <HTML> <HEAD> <TITLE>设置背景颜色</TITLE> </HEAD> <BODY> <CENTER> ...

  4. OpenGL的glClearColor和glClear改变背景颜色

    OpenGL的glClearColor和glClear改变背景颜色 结合以下两个函数void glClearColor(GLclampf red,    GLclampf green, GLclamp ...

  5. JS和jQuery中ul li遍历获取对应的下角标

    首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2 ...

  6. vue中遇到的一个点击展开或收起并且改变背景颜色的问题。

    <template> <div class="expense-center"> <div class="fl expense-left&qu ...

  7. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

  8. jquery动态改变背景颜色插件

    GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> ...

  9. xml中，button改变背景颜色方法

    在画几个设置界面,用到了button控件,对于button空间的背景色在不同状态下的颜色改变方法,做了一下尝试,发现了两种背景颜色改变的方法,就总结了下. 方法一尝试了好多遍才好,要点在于,在sele ...

随机推荐

  1. javascript字符类型操作函数

    //获取字符串的长度 String.prototype.getByteLength = function() { var bytes=0,i=0; for (; i<this.length; + ...

  2. 项目中redis类似MVC的使用

  3. C语言 创建一个 txt 文件 bin输入字符 保存文件在工作文件夹里

    int main(void) { char s[70]; FILE *fp; fp=fopen("123.txt","r"); if((fp=fopen(&qu ...

  4. android Canvas drawText 文字居中

    1首先利用canvas获取画布的宽高, //获取屏幕的宽和高int width = canvas.getWidth();int height = canvas.getHeight(); 2获取文字的宽 ...

  5. C 和 C++的 不同

    转自: http://studytipsandtricks.blogspot.com/2012/05/15-most-important-differences-between-c.html Basi ...

  6. jquery+ajax分页

    先看效果图:

  7. javascript 典型闭包的用法

    <body><input type="radio" id="radio1" name="readionGroup" /&g ...

  8. 设置MATLAB中figure的背景为白色

    matlab的图形窗口每次背景都是灰色的,而我希望每次都是白色的背景,方便用图: 每次总是需要添加figure('color','w');或者figure('color',[1 1 1])或者set( ...

  9. java常用方法

    public static int byte2int(byte b) { int i = b & 0x07f; if (b < 0) { i |= 0x80; } return i; } ...

  10. NetAnalyzer笔记 之 五 一些抓包技巧分享（不定期更新）

    [创建时间:2016-03-12 10:00:00] [更新时间:2016-05-21 10:00:00] NetAnalyzer下载地址 前一段时间应为工作关系,NetAnalyzer笔记系列已经很 ...