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

 <!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文本框统计字数

    <html> <head> <title>enter</title> <script language="javascript" ...

  2. pod应用--备用

    一.概要 iOS开发时,项目中会引用许多第三方库,CocoaPods(https://github.com/CocoaPods/CocoaPods)可以用来方便的统一管理这些第三方库. 二.安装 由于 ...

  3. AMS1117典型电路

    AMS1117(3.3V.5V) 封装: 常见应用连接: 1.输入旁路电容Input Bypass Capacitor:A 10uF tantalum on the input is a suitab ...

  4. 浅谈单片机、ARM和DSP的异同

    犹记得当年读书的时候,老师说单片机.ARM.DSP有互通之处,都是CPU,但听老师讲都听不懂. 我该如何理解他们,并找出他们的异同呢?我们来看看行内人的看法: ICer,从事ARM CPU的SOC设计 ...

  5. [VBA]根据身份证号码计算年龄的Excel函数

    是的,昨天刚发表了一篇和Excel自定义函数有关的博客,今天又一篇,有凑数的嫌疑.但是,保存知识和传播知识本来就是写博客的初衷,所以也并不多余. 如果不知道什么是Excel自定义函数,请移步这里[1] ...

  6. Underscore.js(1.7.0) 中文文档 Underscore.js 入门

    原文地址:http://www.css88.com/doc/underscore/ Underscore.js 入门   http://www.tuicool.com/articles/jQ3IfeR

  7. zoj2562：搜索+数论(反素数)

    题目大意:求n以内因子数量最多的数  n的范围为1e16 其实相当于求n以内最大的反素数... 由素数中的 算数基本原理 设d(a)为a的正因子的个数,则 d(n)=(a1+1)(a2+1)..... ...

  8. sgu495：概率dp / 推公式

    概率题..可以dp也可以推公式 抽象出来的题目大意: 有 n个小球,有放回的取m次  问 被取出来过的小球的个数的期望 dp维护两个状态 第 i 次取出的是 没有被取出来过的小球的 概率dp[i] 和 ...

  9. spring简单入门示例

    1 控制反转IOC\依赖注入DI,因为翻译的不同,因此有两个名字.       控制反转意思就是说,当我们调用一个方法或者类时,不再有我们主动去创建这个类的对象,控制权交给别人(spring). 依赖 ...

  10. XPath详解

     xPath技术   1 引入 问题:当使用dom4j查询比较深的层次结构的节点(标签,属性,文本),比较麻烦!!! 2 xPath作用 主要是用于快速获取所需的节点对象. 3 在dom4j中如何使用 ...