方法一：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 几种简单的table切换的更多相关文章
	

    
								
  1. 使用JavaScript几种简单的排序
		
    前几天在工作碰到一个json对象排序的问题,一直认为JavaScript不能进行对象的排序,其实并不是,今天就来总结下常见的几种简单排序: 第一类 纯数字: var arrOld = [4,10,9, ...
    
		
    2. 
						
  2. JavaScript简单的tabel切换2
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    3. 
						
  3. 一种简单快速的模板解析方法，活用with javascript版
		
    //一种简单快速的模板解析方法,活用with var parseTpl = function( str, data ) { var tmpl = 'var __p=[];' + 'with(obj|| ...
    
		
    4. 
						
  4. 一种简单,轻量,灵活的C#对象转Json对象的方案(续)
		
    本文参考资料 一种简单,轻量,灵活的C#对象转Json对象的方案 [源码]Literacy 快速反射读写对象属性,字段 一段废话 之前我已经介绍了这个方案的名称为JsonBuilder,这套方案最大的 ...
    
		
    5. 
						
  5. JavaScript 一种轻量级的编程语言
		
     JavaScript 一种轻量级的编程语言 作为一名计算机应用专业的学生,大一上学期开始接触了网页设计和制作,刚开始时感觉做网页很不错,简单地写几行代码就能做出效果来,当时感觉很兴奋,渐渐的喜欢上它 ...
    
		
    6. 
						
  6. JavaScript学习笔记（一）：介绍JavaScript的一些简单知识
		
    JavaScript是世界上最流行的编程语言.这门语言可用于HTML和web,更可广泛用于服务器.PC.笔记本电脑和智能手机等设备.---------------------------------- ...
    
		
    7. 
						
  7. Perl，Python，Ruby，Javascript 四种脚本语言比较
		
    Perl 为了选择一个合适的脚本语言学习,今天查了不少有关Perl,Python,Ruby,Javascript的东西,可是发现各大阵营的人都在吹捧自己喜欢的语言,不过最没有争议的应该是Javascr ...
    
		
    8. 
						
  8. 【Android进阶】Android程序与JavaScript之间的简单调用
		
    本篇将讲解一个简单的Android与JavaScript之间的简单调用的小程序 效果图 工程结构 HTMLActivity.java代码 package com.example.javatojs; i ...
    
		
    9. 
						
  9. TypeScript和JavaScript哪种语言更先进
		
    TypeScript和JavaScript哪种语言更先进 近两年来最火爆的技术栈毫无争议的是JavaScript,随着ES6的普及,不管是从前端的浏览器来看,还是后端的NodeJS场景,JavaScr ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. LoadRunner上传文件脚本
			
    
			
    2. 
						
  2. Eclipse配置Lifery SDK步骤与错误解决。
			
    第一步.我们先去官网下载我们要用的东西 1.Eclipse 2.SDK 3.Tomcat 这是官网下载地址-->https://www.liferay.com/zh/downloads 下面是图 ...
    
			
    3. 
						
  3. python图像卷积
			
    import cv2import numpy as np #filier 2Dsavepath = "E:\\"image = cv2.imread('E:\\me.jpg');c ...
    
			
    4. 
						
  4. 《DSP using MATLAB》示例Example4.6
			
    用到的z变换的性质: 继续解题: 上代码: b = [0,0,0, 0.25, -0.5, 0.0625]; a = [1, -1, 0.75, -0.25, 0.0625]; % polynomia ...
    
			
    5. 
						
  5. zookeeper + LevelDB + ActiveMQ实现消息队列高可用
			
    通过集群实现消息队列高可用. 消息队列在项目中存储订单.邮件通知.数据分发等重要信息,故对消息队列稳定可用性有高要求. 现在通过zookeeper选取activemq leader的形式实现当某个ac ...
    
			
    6. 
						
  6. canvas 3D运动球效果
			
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
    
			
    7. 
						
  7. Glow Android 优化实践
			
    了解 Glow 的朋友应该知道,我们主营四款 App,分别是Eve.Glow.Nuture和Baby.作为创业公司,我们的四款 App 都处于高速开发中,平均每个 Android App 由两人负责开 ...
    
			
    8. 
						
  8. 当 NSDictionary 遇见 nil
			
    Demo project: NSDictionary-NilSafe 问题 相信用 Objective-C 开发 iOS 应用的人对下面的 crash 不会陌生: *** -[__NSPlacehol ...
    
			
    9. 
						
  9. Python基础4- 字符串
			
    Python字符串是由数字.字母.下划线组成的一串字符,我们可以使用引号来创建字符串.如:str = 'Helloworld'在Python中没有char类型,单个字符也作为string使用; Pyt ...
    
			
    10. 
						
  10. Oralce 常用语句
			
    注:大写代表需要替换掉额 --更新字段名 alter table TABLE rename column COL_OLD to COL_NEW --添加字段名 alter table TABLE ad ...
    
			
    11.