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

 <!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. MongoDB学习笔记--基本命令

    转自:http://www.cnblogs.com/xusir/archive/2012/12/24/2830957.html 数据库文件默认位置 /var/lib/mongodb 成功启动Mongo ...

  2. word2vec的艰难成长史

    1.首先在网站上面下载gensim,我是在11服务器上面下载的 2.使用winpython打开 3.在command windows 下使用pip install gensim这句话进行,原先使用这句 ...

  3. XJOI网上同步训练DAY5 T1

    思路:考虑得出,最终的集合一定是gcd=1的集合,那么我们枚举n个数中哪个数必须选,然后把它质因数分解,由于质数不会超过9个,可以状态压缩,去得出状态为0的dp值就是答案. #include<c ...

  4. 【VC编程技巧】文件☞2.3CArchive的用法

    CArchive 对象提供了一个类型安全缓冲机制CArchive 对象提供了一个类型安全缓冲机制.用于将可序列化对象写入CFile 对象或从中读取可序列化对象.通常,CFile 对象表示磁盘文件:但是 ...

  5. BZOJ2697: 特技飞行

    2697: 特技飞行 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 607  Solved: 363[Submit][Status] Descript ...

  6. Linux中应用程序如何使用系统调用syscall

    最近在做Android,其中一个任务是写一个能在Linux命令行运行的测试AP,运行这个AP就能关闭设备电源,即Power Off. 在 Linux内核中已经找到了关闭电源的函数kernel_powe ...

  7. DSP与单片机的区别

    以前刚学习单片机时,经过一订的编程,能实现很多不同的功能,当时就觉得单片机真的是神通广大.后来接触到DSP,发现DSP处理数字在通信上,更加方便.于是我就很好奇的问自己,DSP和单片机,究竟有什么区别 ...

  8. POJ1845 数论 二分快速取余

    大致题意: 求A^B的所有约数(即因子)之和,并对其取模 9901再输出. 解题思路: 应用定理主要有三个: (1)   整数的唯一分解定理: 任意正整数都有且只有一种方式写出其素因子的乘积表达式. ...

  9. log4j 突然不打印记录，提示：No appenders could be found for logge，处理方法

    log4j 一直都在使用正常,log4j.xml配置.代码都没有修改,突然不打印记录,出现下面提示: log4j:WARN No appenders could be found for logger ...

  10. 去掉MySQL字段中的空格

    mysql replace 函数   语法:replace(object,search,replace)   意思:把object中出现search的全部替换为replace   案例: SQL Co ...