方法一：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. hdu 1203 概率+01背包
			
    I NEED A OFFER! Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Sub ...
    
			
    2. 
						
  2. 如何在Crystal Portlet中正确返回JSON数据给AJAX请求？
			
    当Crystal Portlet中需要采用Ajax请求,并让后台返回Json数据时,如何才能正确.方便的返回Json数据呢? 以下两种方法均可: 方法一:Ajax请求时,采用RenderURL,对应P ...
    
			
    3. 
						
  3. Angular JS 学习之 Scope作用域
			
    1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带: Scope是一个对象,有可用的方法和属性: Scope可应用在视图和控制器上: 2.当你在AngularJS中 ...
    
			
    4. 
						
  4. js-原型以及继承小案例
			
    function human(name,tall){ this.name=name; this.tall=tall; this.toSleep=function(){ alert('no sleep' ...
    
			
    5. 
						
  5. HDU5754 Life Winner Bo（博弈）
			
    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5754 Description Bo is a "Life Winner" ...
    
			
    6. 
						
  6. javascript拾掇
			
    用javascript如何给span赋值呢?一般有两种方法: 1>输出html <body onload="s()"><span id="hell ...
    
			
    7. 
						
  7. ural 2070. Interesting Numbers
			
    2070. Interesting Numbers Time limit: 2.0 secondMemory limit: 64 MB Nikolay and Asya investigate int ...
    
			
    8. 
						
  8. 使用CSS代码修改博客模板
			
    在修改设置使公告栏里的头像更新为新的头像时发现里边还有“页面定制CSS代码”这一选项,查了一下发现这东西可以对页面做一些个性化的调整.正好目前我使用的这个模板标题和导航栏的字体实在难看,顺手修改了一下 ...
    
			
    9. 
						
  9. hbase 问题记录
			
    hbase regionserver挂掉~ org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.hdfs.server.namenode.L ...
    
			
    10. 
						
  10. js函数中参数的传递
			
    数据类型 在 javascript 中数据类型可以分为两类: 基本类型值 primitive type,比如Undefined,Null,Boolean,Number,String. 引用类型值,也就 ...
    
			
    11.