javascript实现选项卡切换的4种方法
方法一：for循环+if判断当前点击与自定义数组是否匹配
<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为当前点击
<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
<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+匿名函数的自执行
<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实现选项卡切换的4种方法的更多相关文章
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- javascript生成新标签的三种方法
javascript生成新标签的三种方法:http://www.cnblogs.com/online-link/p/6062423.html
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- JavaScript中数组去重的几种方法
JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...
- js实现选项卡切换的三种方式
前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...
- javascript中数组去重的4种方法
面试前端必须准备的一道问题:怎样去掉Javascript的Array的重复项.在最近面试中,百度.腾讯.盛大等都在面试里出过这个题目.这个问题看起来简单,但其实暗藏杀机. 考的不仅仅是实现这个功能,更 ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- JavaScript字符串转数字的5种方法及其陷阱
摘要 :JavaScript 是一个神奇的语言,字符串转数字有 5 种方法,各有各的坑法! String 转换为 Number 有很多种方式,我可以想到的有 5 种! parseInt(num); / ...
- JavaScript 区分中英文字符的两种方法: 正则和charCodeAt()方法
正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. 而判断中文字符, 简单且执行效率高. regExpForm.onb ...
随机推荐
- Java同步的三种实现方式
1.使用synchronized关键字修饰类或者代码块: 2.使用Volatile关键字修饰变量: 3.在类中加入重入锁 举例子:多个线程在处理一个共享变量的时候,就会出现线程安全问题.(相当于多个窗 ...
- BZOJ 4817: [Sdoi2017]树点涂色 LCT+Access的性质+DFS序+线段树
Code: #include<bits/stdc++.h> #define maxn 200003 #define inf -1000000 using namespace std; vo ...
- PHP第一节课
基础语法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- 将RedHat的yum更换为CentOS的yum
CentOS6.8 脚本: #安装yum所需的包已经下载到本地 #!/bin/bashrpm -qa | grep yum | xargs rpm -e --nodepsrm -rf /etc/yum ...
- jenkins+svn+tomcat部署war包
svn是版本控制器,是提供一个版本库让程序员把项目提交上去,每一次更新代码提交后都会记录 jenkins是持续部署的工具,是让项目自动部署发布出去的工具,当项目代码发生改变时就需要重新打包成war包, ...
- C#学习笔记_05_输入输出
05_输入输出 输出语句 Console.WriteLine( ); 将括号内内容输出到控制台,并且换行 Console.Write( ); 将括号内内容输出到控制台,不换行 Console.Writ ...
- 把 Python 脚本打包成可以直接双击运行的 .exe 文件 【转】
因为最近要用到 Python 脚本,所以自己学习了一下,顺便学习如何把它打包成 .exe 可执行文件,达到双击运行的效果,网上找了资料,保存下来学习用,原文出处:https://baijiahao.b ...
- Docker在WIN7上的配置
为什么使用Docker Toolbox Docker在Windows上使用有两种方式,一是利用VirtualBox建立linux虚拟机,在linux虚拟机中安装docker服务端和客户端,二是利用Wi ...
- 利用Socket 客户端---->服务端 传送文件到指定路径，并返回一个友好的回馈
首先盲写的一个传输文件的方法,但测试发现了一个非常不容易发现的问题,这里先说明一下. 错误的代码如下: package com.TCP.java; import java.io.File; impor ...