要求：

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

实现思路：

  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. 初学WebGL引擎-BabylonJS：第1篇-基础构造

    继续上篇随笔 步骤如下: 一:http://www.babylonjs.com/中下载源码.获取其中babylon.2.2.js.建立gulp项目

  2. Resources.UnloadUnusedAssets

    2017.11.7更新: 其实这个函数就是顾名思义,关键是理解AssetBundle, Asset, GameObject, 资源等之间的关系,参考此文即可: http://www.cnblogs.c ...

  3. MyBatis-Plus分页——PageHelper和IPage介绍

    两个都用于分页,常用的应该是PageHelper了,理解了一下源码后发现IPage比PageHelper好用. 使用方法是 PageHelper.startPage()然后后边写sql就可以. 紧接着 ...

  4. shell小技巧（6）修改一批文件后缀

    当前目录下后缀为sh的文件,改为后缀shell. 这里列出两种方法,先看第一种.方法1:#!/bin/bash str=`find ./ -name \*.sh`  # 会产生一个列表 file=&q ...

  5. MongoDB基础总结

    1.数据可基本操作 1. 创建数据库 use  databaseName 选择一个数据库,如果数据库不存在就自动创建一个数据库 只有向数据库中插入数据时,数据库才会被真实创建出来,而当数据库中没有数据 ...

  6. Apache 和 Nginx 下绑定域名

    Apache 方法一 参考:链接 版本:2.3 配置文件位置:/usr/share/doc/httpd/httpd-vhosts.conf 添加域名和站点信息: vim /usr/share/doc/ ...

  7. 【小程序】---- 使用 Echarts 的方式

    1.下载 GitHub 上的 ecomfe/echarts-for-weixin 项目,Echarts微信版. 地址:https://github.com/ecomfe/echarts-for-wei ...

  8. centos下安装mongodb和php的mongo扩展

    安装MongoDB 1.下面安装MongoDB,先下载: cd /usr/src wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2 ...

  9. [程序员代码面试指南]数组和矩阵-求最短通路值(BFS)

    题意 给二维矩阵 1.0组成,问从左上角到右下角的最短通路值. 题解 BFS基础.头节点入队:对队内每个节点判断.处理,符合条件的入队:到了终点节点返回. 相关知识 Queue为接口,LinkedLi ...

  10. doeker部署zabbix

    docker部署zabbix   我相信大家都已经会再物理机上跑zabbix并且监控了,那么有没有想过在docker中跑zabbix?下面咱们来看看如何在docker中搭建zabbix并且监控 部署环 ...