JavaScript按钮排他思想
要求：
有一系列按钮，要求每单击其中一个，该按钮改变样式（以背景颜色为例），其他按钮恢复保持默认样式。
实现思路：
- 获取所有按钮元素
- 首先先把其他按钮的背景颜色去掉
- 再单独设置自己的样式
代码实现：
仅展示<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按钮排他思想的更多相关文章
- 用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- Js中的排他思想
<body> <button>按钮1</button> <button>按钮2</button> <butto ...
- js 排他思想案例
<!-- 排他思想 --> <button>按钮1</button> <button>按钮2</button> <button> ...
- Javascript 解读与思想
Javascript 解读与思想 解读:对底层类库功能的理解 思想:对程序架构的部署思维
- 聚焦JavaScript面向对象的思想
面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...
- JavaScript结构三层——思想快速介绍
本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写JavaS ...
- JavaScript结构三层——思想快速入门
本文版权归博客园和作者吴双本人所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛,我们共同进步. 今天讨论的是什么 如果你的工作中需要写Jav ...
- 浅谈javascript的面向对象思想
面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...
- [Javascript] 面向对象编程思想
1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1. ...
随机推荐
- python小白入门基础（二：变量）
#变量:可以改变的量就是变量,实际上是由内存开辟的一块空间,临时存在内存中,以便后续代码使用.#作用:代指内存中某个地址中的内容. #1.变量的概念name = "王五"name ...
- Codeforces1348 题解
AC代码连接 A Phoenix and Balance 显而易见,将前\(\frac{n}{2}-1\)个和最后1个分为1组,剩下的1组即为最优方案. B Phoenix and Science 这 ...
- git 如何比较不同分支的差异
前两天,良许在做集成的时候碰到了一件闹心事.事情是这样的,良许的一位同事不小心把一个错误的 dev 分支 merge 到了 master 分支上,导致了良许编译不通过.于是,我们需要将版本回退到 me ...
- HashMap源码解析、jdk7和8之后的区别、相关问题分析（多线程扩容带来的死循环）
一.概览 HashMap<String, Integer> map = new HashMap<>(); 这个语句执行起来,在 jdk1.8 之前,会创建一个长度是 16 的 ...
- Hexo + Github Pages搭建个人网站主页
1.GitHub创建个人仓库 登录GitHub创建账号,同时拥有一个自己设定的用户名(username).点击New Repositories创建仓库.仓库名必须为username.github.io ...
- 如何制作一个手机上的Github图床捷径(workflow)
准备工作 github账号与绑定邮箱 建立一个仓库用于存放图片 生成github token 注意生成之后要备份以免后面要用到(页面刷新之后会看不见) 了解github上传文件的 GitHub API ...
- [SpringBoot项目]笔记
request&response 重定向(跳转) 301 永久跳转/302 临时跳转 工业用途 通过url判断来自手机页面,就跳转到手机对应的页面. 活动页面临时改url? 异常处理 定义一个 ...
- SpringCloud实战 | 第二篇：SpringCloud整合Nacos实现注册中心
前言 随着eureka的停止更新,如果同时实现注册中心和配置中心需要SpringCloud Eureka和SpringCloud Config两个组件;配置修改刷新时需要SpringCloud Bus ...
- zepto | 用事件委托去解决无法给新增添的DOM添加事件的问题
前段时间在做一个任务的时候,碰见了一个问题:zepto无法用on事件去监听新增加的dom事件.这个问题用live可解决, 但是live在ios下失效,为了解决这个问题,我采用了暴力的方法去解决,每次添 ...
- FFmpeg开发笔记（五）：ffmpeg解码的基本流程详解（ffmpeg3新解码api）
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...