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

 <!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闭包作用

    闭包的简单概念:闭包就是能够读取其他函数内部变量的函数. 函数内部的函数闭包的两个最大的作用读取函数内部的变量变量的值始终保持在内存中function A(){ var n=999; nAdd=fun ...

  2. C语言初学 数学中带根号的复杂计算问题

    #include<stdio.h> #include<math.h> int main() { double a,b; scanf("%lf%lf",&am ...

  3. 二维指针*(void **)的研究（uC/OS-II案例） 《转载》

    uC/OS-II内存管理函数内最难理解的部分就是二维指针,本文以图文并茂的方式对二维指针进行了详细分析与讲解.看完本文,相信对C里面指针的概念又会有进一步的认识. 一.OSMemCreate( ) 函 ...

  4. WebApi上传图片 await关键字

    await关键字对于方法执行的影响 将上一篇WebApi上传图片中代码修改(使用了await关键字)如下: [HttpPost] public async Task<string> Pos ...

  5. Hibernate学习笔记--映射配置文件详解

    参考资料: http://blog.163.com/hzd_love/blog/static/13199988120108265317988/ http://www.cnblogs.com/often ...

  6. (摘)oracle dataguard切换

    众所周知,Data Guard已经是现今标准的主流容灾方案,由于日志传递对于网络适应程度强,且可以采用同步实时的传递方式和异步延迟的传递方式,甚至可以成为远程的异地容灾方案.不管用于何种用途,DG都免 ...

  7. cf C. Find Maximum

    http://codeforces.com/contest/353/problem/C 先预处理前i个数的和,然后找到第一个出现的1,然后变成0后的和与目前的和比较,如果大就更新. #include ...

  8. list append 总是复制前面的参数，而不复制最后一个参数

    append 总是复制前面的参数,而不复制最后一个参数 (define a1 '(1 2 3)) (define a2 '(a b c)) (define x (append a1 a2)) x ; ...

  9. 算法导论（第三版）Exercies2.2(插入排序)

    2.2-1: Θ (n3) 2.2-2:插入排序 void selectionSort(int a[], int n) { int i, j, k, key; ; i<n-; i++) { k ...

  10. UGUI 下拉滚动框

    开始制作好友系统了, 发现有一个UI跟QQ的面板一模一样. 于是就写了一个公共的下拉滚动框.需要把按钮的中心点(pivot.y = 1),描点为最上方 直接上图吧 代码如下: using UnityE ...