要求：

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

实现思路：

  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. 关于action的使用在firefox报错的问题

    现在的网站有很多都是鼠标移到上面去才会显示出相应的一些标签之类的东西,然后再进行操作,但是因为要操作的元素一开始是隐藏的,就没办法直接定位,只能调用action来模拟鼠标悬停操作,也就是下面这句代码: ...

  2. Unity资源引用问题

    前几天做项目时,遇到一个奇怪的问题: 从一处复制了一个预制体,预制体上面还附有一个材质球,材质球上关联着另一张贴图. 将所有关联的东西,均Copy两份,然后关联成一个新的预制体,最后用项目内的读取内存 ...

  3. 使用Loadrunner进行性能测试

    一.确定性能测试的范围.要求.配置.工具等 明确测试的系统: 本文档主要指的是web应用. 明确测试要求: 用户提出性能测试,例如,网站首页页面响应时间在3S之内,主要的业务操作时间小于10s,支持3 ...

  4. Tomact的中文乱码设置

    在使用Tomact时,有时候使用中文时,窗口会把中文部分显示为乱码,这时需要修改相关配置,让其正常显示. 1.修改server.xml的配置,解决显示窗口的乱码 打开Tomcat下/bin/serve ...

  5. 自定义注解-方法重试@RetryProcess

    背景 在项目开发中,有时候会出现接口调用失败,本身调用又是异步的,如果是因为一些网络问题请求超时,总想可以重试几次把任务处理掉. 一些RPC框架,比如dubbo都是有重试机制的,但是并不是每一个项目多 ...

  6. Linux平台Zabbix Agent的安装配置

    这里简单总结一下Linux平台Zabbix Agent的安装配置,实验测试的Zabbix版本比较老了(Zabbix 3.0.9),不过版本虽然有点老旧,但是新旧版本的安装步骤.流程基本差别不大.这里的 ...

  7. 非构造函数方式创建DbContext实例的方法

    using Microsoft.EntityFrameworkCore;using Microsoft.EntityFrameworkCore.Design;using Microsoft.Entit ...

  8. python中使用mock模块返回数据

    mock是辅助单元测试的一个模块.它允许您用模拟对象替换您的系统的部分,并对它们已使用的方式进行断言. mock在python3中已经被集成到了unittest单元测试框架中,所以,可以直接使用. m ...

  9. python操作从数据库中获取数据的接口

    1.输入一个表名,获取表里面的数据 2.判断用户是否存在,如果不存在就添加到数据库里面

  10. oracle之时间类型

    Oracle 时间类型及Timezone 20.1 Oracle的六种时间类型 DATETIMESTAMPTIMESTAMP WITH TIME ZONETIMESTAMP WITH LOCAL TI ...