JavaScript 几种简单的table切换
2024-04-12 13:26:53
方法一：for循环+if判断当前点击与自定义数组是否匹配
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tab切换</title><style type="text/css">button {width:120px;height: 32px;line-height: 32px;background-color: #ccc;font-size: 24px;}div {display: none;width:200px;height: 200px;font-size: 72px;color:#ddd;background-color: green;border:1px solid black;}</style>
</head>
<body><button style="background-color: yellow;">1</button><button>2</button><button>3</button><button>4</button><div style="display:block;">1</div><div>2</div><div>3</div><div>4</div><script type="text/javascript">//定义数组并获取数组内各个的节点var buttonArr = document.getElementsByTagName("button");var divArr = document.getElementsByTagName("div");for(var i = 0; i < buttonArr.length;i++) {buttonArr[i].onclick = function() {//this // alert(this.innerHTML)//for循环遍历button数组长度for(var j = 0; j < buttonArr.length; j++) {//重置所有的button样式
buttonArr[j].style.backgroundColor = "#ccc";//给当前的(点击的那个)那个button添加样式this.style.backgroundColor = "yellow";//隐藏所有的div
divArr[j].style.display = "none";//判断当前点击是按钮数组中的哪一个？if(this == buttonArr[j]) {// alert(j);//显示点击按钮对应的div
divArr[j].style.display = "block";}}}}</script>
</body>
</html>方法二：自定义index为当前点击
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tab切换</title><style type="text/css">button {width:120px;height: 32px;line-height: 32px;background-color: #ccc;font-size: 24px;}div {display: none;width:200px;height: 200px;font-size: 72px;color:#ddd;background-color: green;border:1px solid black;}</style>
</head>
<body><button style="background-color: yellow;">1</button><button>2</button><button>3</button><button>4</button><div style="display:block;">1</div><div>2</div><div>3</div><div>4</div><script type="text/javascript">var buttonArr = document.getElementsByTagName("button");var divArr = document.getElementsByTagName("div");for(var i = 0; i < buttonArr.length;i++) {buttonArr[i].index = i;// buttonArr[i].setAttribute("index",i);
buttonArr[i].onclick = function() {for(var j = 0; j < buttonArr.length; j++) {buttonArr[j].style.backgroundColor = "#ccc";buttonArr[this.index].style.backgroundColor = "yellow";divArr[j].style.display = "none";divArr[this.index].style.display = "block";}}}</script>
</body>
</html>方法三：className
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>tab</title><style type="text/css">* {padding:0; margin:0;}button {background-color: #ccc;width:80px;height: 30px;}.btn-active {background-color: yellow;font-weight:bold;font-size: 14px;}div{width:200px;height: 200px;font-size: 64px;background-color: #0c0;display: none;color:#fff;}.div-active {display: block;}</style>
</head>
<body><button class="btn-active">按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><div class="div-active">1</div><div>2</div><div>3</div><div>4</div><script type="text/javascript">//1.先获取元素var buttonList = document.getElementsByTagName("button");var divList = document.getElementsByTagName("div");//2.添加事件for(var i = 0; i < buttonList.length; i++) {buttonList[i].index = i;buttonList[i].onclick = function() {for(var j = 0; j < buttonList.length;j++) {buttonList[j].className = "";divList[j].className = "";}this.className = "btn-active";divList[this.index].className = "div-active";}}</script>
</body>
</html>方法四：className+匿名函数的自执行！
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>tab</title><style type="text/css">* {padding:0; margin:0;}button {background-color: #ccc;width:80px;height: 30px;}.btn-active {background-color: yellow;font-weight:bold;font-size: 14px;}div{width:200px;height: 200px;font-size: 64px;background-color: #0c0;display: none;color:#fff;}.div-active {display: block;}</style>
</head>
<body><button class="btn-active">按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><div class="div-active">1</div><div>2</div><div>3</div><div>4</div><script type="text/javascript">//1.先获取元素var buttonList = document.getElementsByTagName("button");var divList = document.getElementsByTagName("div");//2.添加事件for(var i = 0; i < buttonList.length; i++) {(function(i){ //匿名函数自执行
buttonList[i].onclick = function() {for(var j = 0; j < buttonList.length;j++) {buttonList[j].className = "";divList[j].className = "";}this.className = "btn-active";divList[i].className = "div-active";}})(i)}</script>
</body>
</html>转载于:https://www.cnblogs.com/CaktyRiven/p/5090965.html
JavaScript 几种简单的table切换相关推荐
- javascript js jsp接收servlet传送的数组ArrayList的一种简单的非ajax方法
这里提供一种简单的接收servlet传来动态数组ArrayList的方法:c标签foreach 首先需在jsp的开始部分加 <%@ taglib uri="http://java.su ...
- GIT将本地项目上传到Github（两种简单、方便的方法）
GIT将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安 ...
- table 切换效果
一:table栏切换简单模板 1.1:首先定义几个必须用到的css样式 当h5的标签被添加show类别的时候,就会显示:当h5里的标签被添加hidden_样式的时候就会被隐藏. .hidden_{di ...
- java 调用关系_【Java基础】几种简单的调用关系与方法
直接上代码吧. class lesson4AB //同一个类下的public修饰的方法A,B可以相互调用 { public void A() { B();//等价于this.B(); } public ...
- javascript 代码_如何使您JavaScript代码保持简单并提高其可读性
javascript 代码 by Leonardo Lima 莱昂纳多·利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your ...
- EasyBridge:一种简单的js-bridge设计方案
EasyBridge是一个简单易用的js-bridge的工具库,提供了日常开发中,JavaScript与Java之间通讯的能力,与其他常见的js-bridge工具库实现方案不同,EasyBridge具 ...
- php xml对象解析_php解析xml 的四种简单方法(附实例)
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...
- 调优您的 LAMP 应用程序的 5 种简单方法
John Mertic, 软件工程师, SugarCRM [url=]简介[/url] Wikipedia.Facebook 和 Yahoo! 等主要 web 属性使用 LAMP 架构来为每天数百万的 ...
- TypeScript和JavaScript哪种语言更先进
TypeScript和JavaScript哪种语言更先进 近两年来最火爆的技术栈毫无争议的是JavaScript,随着ES6的普及,不管是从前端的浏览器来看,还是后端的NodeJS场景,JavaScr ...
最新文章
- IP地址，子网掩码、默认网关，DNS理论解释
- android 视频默认图片格式,Android获取视频文件某一帧并设置图片
- 视频编码中常用熵编码介绍
- 导航选中后标记的样式实现滑动效果
- how to learn
- MyBatis 实际使用案例-plugins
- kotlin 判断数字_Kotlin程序检查数字是否为质数
- 信息学奥赛一本通（1247：河中跳房子）
- thymeleaf 获取yml中的值_Thymeleaf模板引擎学习
- ZooKeeper 了解
- 新时代ITer们的思考及购书有奖活动
- mysql 联合索引 range_MySQL 联合索引使用情况
- 如何查看局域网内所有的IP
- 使用opencv在视频中插入文字、图片；生成特定文字视频
- imputation-综述文章：关于网络推理的scRNA序列插补工具基准突出了高稀疏性水平下的性能缺陷
- arm64的ioremap_ARMv8 内存管理架构.学习笔记
- 亲测！这款耳机堪比AirPods，还不到200块！
- Java毕设项目共享充电宝系统（java+VUE+Mybatis+Maven+Mysql）
- 物流快递电子面单HTML接口API代码-快递100
- 申请企业邮箱购买步骤，外贸企业邮箱注册流程步骤