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. ...
随机推荐
- Kubernetes-14：一文详解Pod、Node调度规则(亲和性、污点、容忍、固定节点)
Kubernetes Pod调度说明 简介 Scheduler 是 Kubernetes 的调度器,主要任务是把定义的Pod分配到集群的节点上,听起来非常简单,但要考虑需要方面的问题: 公平:如何保证 ...
- POJ-2299-Ultra-QuickSort（单点更新 + 区间查询+离散化）
In this problem, you have to analyze a particular sorting algorithm. The algorithm processes a seque ...
- 启动oracle11监听器错误
启动oracle11监听器错误:本地计算机上的OracleOraDb11g_home1TNSListener服务启动后又停止了解决方案 . 关键字:启动oracle10监听器错误:本地计算机上的Ora ...
- Mybatis源码学习第七天(PageHelper分析)
其实我本来是不打算写这个PageHelper的,但是后来想了想,还是写了吧!现在市场用Mybatis的产品分页应该差不多都是用PageHelper来实现的,毕竟Mybatis的分页rowbound.. ...
- SpringBoot搭建环境
选择文件新建一个项目 选择:Spring Initializr,其他配置不变,点击下一步 这里一般写包名和项目名,这里我就默认,直接点击下一步 这里选择:Web --> Spring Web ...
- JDK1.7之前的Bug之静态代码块
程序的主入口是main方法,但是在jdk1.7之前,可以没有main方法也一样能运行,很是不可思议,到底是什么原因呢?,大家都知道在类中定义了静态代码块的话,是首先执行代码块里的语句的,如果把静态代码 ...
- Java单例模式的实现与破坏
单例模式是一种设计模式,是在整个运行过程中只需要产生一个实例.那么怎样去创建呢,以下提供了几种方案. 一.创建单例对象 懒汉式 public class TestSingleton { // 构造方法 ...
- 感知生命周期的数据 -- LiveData
感知生命周期的数据 -- LiveData 零. 前言 上篇文章<万物基于Lifecycle> 介绍了整个Lifecycle体系的基石,今天这篇文章咱们来看看Jetpack给我们带来的活着 ...
- mongodb3.4.5用http访问28017端口
4.要想用28017去访问,百度说必须开启http服务 4.1.前提: windows下安装mongodb必须装在没有中文和空格的目录下,我直接装在了D盘根目录 删掉MongoDB\Server\3. ...
- 从CSDN博客下载的图片如何无损去水印
如果你想下载别人CSDN博客文章中很好看的图片,但却有水印 想要下载去水印的图片,可以先鼠标右击该图片,选择复制图片地址 https://img-blog.csdnimg.cn/20200916140 ...