方法一：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. 经典贪心算法uva11729
			
    uva11729 这个题的题意是 你有n个部下,每个部下需要完成一项任务.第i个部下需要你花Bi分钟交代任务,然后他会立刻独立地.无间断地执行Ji分钟后完成任务. 你需要选择交待任务的顺序,使得所有任 ...
    
			
    2. 
						
  2. Liferay 6.2 改造系列之十二：修改Portal设置页面表单内容
			
    将Portal设置页面中无用的内容删除: 在/portal-master/portal-impl/src/portal.properties文件中,有如下配置: # # Input a list of ...
    
			
    3. 
						
  3. SSH无密码登录配置小结
			
    ssh-keygen -t rsa //-t指定算法 将公钥复制到被管理机器上面 ssh-copy-id -i ~/.ssh/id_rsa.pub 172.29.0.89 ssh-copy-id -i ...
    
			
    4. 
						
  4. HTTP 请求方式: GET和POST的比较（转）
			
    GET和POST是HTTP的两个常用方法.   什么是HTTP? 超文本传输协议(HyperText Transfer Protocol -- HTTP)是一个设计来使客户端和服务器顺利进行通讯的协议 ...
    
			
    5. 
						
  5. 移动Web开发规范
			
    1.字体设置 使用无衬线字体 body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } 2.设 ...
    
			
    6. 
						
  6. hdu4968
			
    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4968 说是考dp,但是我没出来dp在哪,可能贪心思想更多一些吧. AC代码: #inclu ...
    
			
    7. 
						
  7. no-jquery 05 Utilities
			
    Utilities type // is this a function? typeof someValue === 'function'; // is this an object? someVal ...
    
			
    8. 
						
  8. iOS10 UI教程视图的生命周期
			
    iOS10 UI教程视图的生命周期 说到视图的生命周期一般都是指视图控制器的视图生命周期.在视图的声明周期中最主要的有8个方法,分别为loadView().viewDidLoad().viewWill ...
    
			
    9. 
						
  9. UVa1515 Pool construction（最小割）
			
    题目 Source https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...
    
			
    10. 
						
  10. 使用oracle11g_instant_client来解决在不安装oracle客户端的情况下连接服务端
			
    一.下载instantclient_11_2,可去oracle官网进行下载. 二.解压缩下载的instantclient_11_2,将instantclient_11_2目录拖放到C:\Program ...
    
			
    11.