方法一：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种方法的更多相关文章

  1. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  2. javascript生成新标签的三种方法

    javascript生成新标签的三种方法:http://www.cnblogs.com/online-link/p/6062423.html

  3. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  4. JavaScript中数组去重的几种方法

    JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...

  5. js实现选项卡切换的三种方式

    前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...

  6. javascript中数组去重的4种方法

    面试前端必须准备的一道问题:怎样去掉Javascript的Array的重复项.在最近面试中,百度.腾讯.盛大等都在面试里出过这个题目.这个问题看起来简单,但其实暗藏杀机. 考的不仅仅是实现这个功能,更 ...

  7. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  8. JavaScript字符串转数字的5种方法及其陷阱

    摘要 :JavaScript 是一个神奇的语言,字符串转数字有 5 种方法,各有各的坑法! String 转换为 Number 有很多种方式,我可以想到的有 5 种! parseInt(num); / ...

  9. JavaScript 区分中英文字符的两种方法: 正则和charCodeAt()方法

    正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. 而判断中文字符,  简单且执行效率高. regExpForm.onb ...

随机推荐

  1. 小程序text组件内部上边距的问题

    index.wxml: <view class="slogan"> <text> 建立跨文化的全球视野,做世界公民 </text> </v ...

  2. Java基础学习笔记： 多线程，线程池，同步锁（Lock，synchronized ）(Thread类,ExecutorService ，Future类)（卖火车票案例）

    多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线 ...

  3. Android 性能测试初探（六）

    书接前文 Android 性能测试初探之功耗(五) 本节聊聊性能测试的最后一项- 流量,当然我所指的性能测试是针对大部分应用而言的,可能还有部分应用会关注网速.弱网之类的测试,但本系列文章都不去一一探 ...

  4. Skyline Web 端数据浏览性能优化

    三维数据的效率一直是个瓶颈,特别是在Web端浏览一直是个问题,在IE内存限制1G的条件下,对于三维数据动不动几十G的数据量,这1G显得多么微不足道.虽然现在三维平台都是分级加载,或者在程序中采用数据分 ...

  5. css 陌生属性

    记录一些我之前没见过属性 1.width:100vh  100vh 2.min-height:calc(100vh + 51px);cale 3.:nth-child nth-child   和 :n ...

  6. 洛谷P1192 台阶问题【dp递归】

    有NN级的台阶,你一开始在底部,每次可以向上迈最多KK级台阶(最少11级),问到达第NN级台阶有多少种不同方式. 输入输出格式 输入格式: 两个正整数N,K. 输出格式: 一个正整数,为不同方式数,由 ...

  7. Golang - 流程控制

    目录 Golang - 流程控制 1. 选择结构 2. 循环结构 3. 跳转语句 Golang - 流程控制 1. 选择结构 if else语句: //package 声明开头表示代码所属包 pack ...

  8. 权值线段树&线段树合并

    权值线段树 所谓权值线段树,就是一种维护值而非下标的线段树,我个人倾向于称呼它为值域线段树. 举个栗子:对于一个给定的数组,普通线段树可以维护某个子数组中数的和,而权值线段树可以维护某个区间内数组元素 ...

  9. Firefox配置Fiddler

    Fiddler: Toos->Telerik Fiddler Options->HTTPS->Capture HTTPS CONNECTs Toos->Telerik Fidd ...

  10. Spring Cloud-hystrix Feign(九)

    前面使用ribbon拦截RestTemplate 实现服务的负载均衡 使用Hystrix进行熔断降级请求缓存  用原生的方式 将会有大量的模板代码,feigin就是rabbon和Histrix的整合 ...