要求：

有一系列按钮，要求每单击其中一个，该按钮改变样式（以背景颜色为例），其他按钮恢复保持默认样式。

实现思路：

  1. 获取所有按钮元素
  2. 首先先把其他按钮的背景颜色去掉
  3. 再单独设置自己的样式

代码实现：

仅展示<body></body>标签内的内容

<body>

    <button>按钮1</button>

    <button>按钮2</button>

    <button>按钮3</button>

    <button>按钮4</button>

    <button>按钮5</button>

    <script>

        var btns = document.getElementsByTagName('button');

        // 获取所有按钮元素

        for (var i = 0; i < btns.length; i++) {

            btns[i].onclick = function() {

                for (var j = 0; j < btns.length; j++) {

                    btns[j].style.backgroundColor = '';

                }

                // 先把其他按钮的背景颜色去掉

                this.style.backgroundColor = 'red';

                // 单独设置自己的样式

            }

        }

    </script>

</body>

JavaScript按钮排他思想的更多相关文章

  1. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  2. Js中的排他思想

    <body>     <button>按钮1</button>     <button>按钮2</button>     <butto ...

  3. js 排他思想案例

    <!-- 排他思想 --> <button>按钮1</button> <button>按钮2</button> <button> ...

  4. Javascript 解读与思想

    Javascript 解读与思想 解读:对底层类库功能的理解 思想:对程序架构的部署思维

  5. 聚焦JavaScript面向对象的思想

    面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...

  6. JavaScript结构三层——思想快速介绍

    本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写JavaS ...

  7. JavaScript结构三层——思想快速入门

      本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...

  8. 浅谈javascript的面向对象思想

    面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...

  9. [Javascript] 面向对象编程思想

    1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1. ...

随机推荐

  1. WebStorm 运行Rect Native 项目

    今天教大家如何直接使用WebStorm这个IDE直接完成编码+运行项目工作.这样就可以不用打开Xcode了. 1.首先点击WebStorm右上方的下拉箭头弹出的Edit Configurations. ...

  2. 高可用集群corosync+pacemaker之pcs安装使用

    前文我们介绍了高可用集群corosync+pacemaker的集群管理工具crmsh的常用命令的使用,回顾请参考https://www.cnblogs.com/qiuhom-1874/tag/crms ...

  3. C011:分数相加

    代码: #include "stdafx.h" int _tmain(int argc, _TCHAR* argv[]) { int up1,down1,up2,down2; do ...

  4. ZK集群源码解读

    1.1. 集群模式 1.1.1.   数据同步总流程 1.1.1.1. OBSERVING 1.1.1.2. FOLLOWING 1.1.1.3. LEADING 1.1.2. 领导选举 1.1.2. ...

  5. Java审计之XSS篇

    Java审计之XSS篇 0x00 前言 继续 学习一波Java审计的XSS漏洞的产生过程和代码. 0x01 Java 中XSS漏洞代码分析 xss原理 xss产生过程: 后台未对用户输入进行检查或过滤 ...

  6. 双向绑定数据的实现（new Proxy 版本）

    调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  7. Shader 001 - 函数造型能力

    0x00 从函数出发 Shader 中的很多效果都是由函数计算得出的,如何更好地理解二者的关系呢.不妨先看看函数是什么?函数的定义可以简单地描述为:给定一个集合 A,对于其中的元素施加法则 f,则可以 ...

  8. Spring Batch远程分区的本地Jar包模式

    1 前言 欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! Spring相关文章:Springboot-Cloud Spring Batch远程分区对于大量数据的处理非常擅长,它的实现 ...

  9. ASP.NET Core 3.x启动时运行异步任务（一）

    这是一个大的题目,需要用几篇文章来说清楚.这是第一篇.   一.前言 在我们的项目中,有时候我们需要在应用程序启动前执行一些一次性的逻辑.比方说:验证配置的正确性.填充缓存.或者运行数据库清理/迁移等 ...

  10. HBase表的数据导出和导入

    1. 表数据导出 hbase org.apache.hadoop.hbase.mapreduce.Export test file:///home/hadoop/test (导入到本地) hbase ...