4种JavaScript实现简单tab选项卡切换的方法
作者:Cakty、Riven 发布时间:2024-02-23 10:25:51
标签:JavaScript,tab,选项卡
本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法,分享给大家供大家参考,具体内容如下
效果图:
方法一: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>
如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
希望本文所述对大家学习javascript程序设计有所帮助。
0
投稿
猜你喜欢
- 由于这个游标 执行一下就相当于SELECT一下 其效率不敢恭维也没做深入研究。 table1结构如下 id &
- 在工作中。在做数据集时,需要对图片进行处理,照相的图片我们只需要特定的部分,所以就想到裁剪一种所需的部分。当然若是图片有规律可循则使用ope
- 错误现象:autopep8无法运行,运行后vscode右下角提示Error: Command failed: autopep8 c:\Use
- FileSystemObject、Folder 和 File 对象的一些方法都与通过 TextStream 对象创建、读取或写入文件有关。虽
- 目录各种姿势比较快的姿势最后各种姿势比如说有一个简单的任务,就是从 1 累加到 1 亿,我们至少可以有 7 种方法来实现,列举如下:1、wh
- 本文实例讲述了Python装饰器(decorator)定义与用法。分享给大家供大家参考,具体如下:什么是装饰器(decorator)简单来说
- 二维离散傅里叶变换(DFT)对于二维图像处理,通常使用 x , y x, yx,y 表示离散的空间域坐标变量,用 u , v u,vu,v
- 利用XMLHTTP无刷新自动实时更新数据,2秒自动刷新一次,2秒取得一次数据.demo.htm 前台显示<script la
- 此篇文章整理新手编写代码常见的一些错误,有些错误是粗心的错误,但对于新手而已,会折腾很长时间才搞定,所以在此总结下我遇到的一些问题。希望帮助
- 介绍每当我使用pandas进行分析时,我的第一个目标是使用众多可用选项中的一个将数据导入Pandas的DataFrame 。对于绝大多数情况
- 1、选择结构通过判断条件是否成立来决定分支的执行。2、选择结构形式:单分支、双分支、多分支。3、多分支结构,几个分支之间有逻辑关系,不能随意
- Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋
- 即使在不太复杂的样式表中,也可能会有两个或者更多个规则找到同一元素。CSS通过一个叫做层叠(cascade)的过程处理这种冲突。
- 经常有一些图像任务需要从一张大图中截取固定大小的patch来进行训练。这里面常常存在下面几个问题:patch的位置尽可能随机,不然数据丰富性
- 初学Python,遇到需要将mat文件转为csv文件,看了很多博客,最后找到了解决办法,代码如下:#方法1from pandas impor
- 问题背景查询MySQL中用逗号分隔的字段【a,b,c】是否包含【a】场景模拟现有表【ec_logicplace】,如下图所示:要求判断数值【
- 引言层次聚类是一种构建聚类层次结构的聚类算法。该算法从分配给它们自己的集群的所有数据点开始。然后将两个最近的集群合并到同一个集群中。最后,当
- 1、cat:拼接直接合并数据2、stack拼接:与cat不同的是,stack创建了一个新的维度,在拼接的同时,给数据增加了类别。并且stac
- 前言:我们写Python基本不需要自己创建抽象基类,而是通过鸭子类型来解决大部分问题。《流畅的Python》作者使用了15年Python,但
- 首先要扩展自带的auth_user表我就放个图吧,同时setting中应该设置:# 此处重载是为了使UserProfile生效AUTH_US