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

 <!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. linux 输入输出重定向

    输入输出重定向 1,输入输出重定向,是针对过滤器的,不针对,编辑器和交互工具 2,>号只把正确的标准输出重定向,输出错误信息,可以用2> 3,新建或清空文件可以直接用>filenam ...

  2. gets和从键盘输入换行符

    i was wrong! 虽然setbuf可以让程序自己管理缓冲,但是像getchar,gets这些标准IO函数还是要通过隐藏的stdin进行操作,而stdin是啥呢?还是一个FILE*,而FILE* ...

  3. R语言教程规划

    本文发表在博客园, http://www.cnblogs.com/stackworm/ 尽管进展中出现了意想不到的事情,期间中断1个多月,但我仍然会坚持下去. 首先,这份教程适合所有对R语言有兴趣且希 ...

  4. Codeforces Round #272 (Div. 1) Problem C. Dreamoon and Strings

    C. Dreamoon and Strings time limit per test 1 second memory limit per test 256 megabytes input stand ...

  5. paip.hadoop的应用研究总结

    paip.hadoop的应用研究总结 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/attil ...

  6. Thinkphp显示系统常量信息的方法（php的用法）

    输入 :public function Main()    {        dump(get_defined_constants(true));    }显示系统信息, 其中: 'APP_PATH' ...

  7. 获取某个文件夹中所有txt文件

    <?php // 获取文件夹中的所有txt文件名 $dir = "D:/a"; //这里输入其他路径 $handle = opendir($dir."." ...

  8. struts配置，略记

    <!-- <listener> <listener-class>org.springframework.web.context.ContextLoaderListener ...

  9. 初学者学Java设计模式（一）------单例设计模式

    单例设计模式 单例设计模式是指一个类只会生成一个对象,优点是他可以确保所有对象都访问唯一实例. 具体实现代码如下: public class A { public static void main(S ...

  10. Git实现从本地加入项目到远程仓库

    Git是如今最流行的版本号控制系统之中的一个了,今天也试试了.成功了上传了远程仓库,接下来看看我是怎么做的. 1.首先,要有git的账号.点击查看怎么注冊? 2.注冊成功之后.登陆GitHub.然后, ...