1.使用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>

2.使用className+匿名函数的自执行（html，css样式与1相同）

 <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>

3.自定义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>

4.使用for循环+if判断当前点击与自定义数组是否匹配（html，css样式与3相同）

<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>

这是初学JS时所使用的方法，现在整理出来，最主要的还是要有自己的想法才是最好的。

JS几种table切换的更多相关文章

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

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

  2. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  3. swiper （Table切换和动态加载时候出现的问题）

    本文为让心灵-去旅行原创,转载请说明.. 我们在写一个简单的swiper图片轮播的时候很简单,是写死的也就那么几张图片轮播.如果这时候图片和一些东西是后台的,你从js里动态添加到DOM时,这时候你就会 ...

  4. vue的table切换

    HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...

  5. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  6. [转] js实现html table 行，列锁定

    js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...

  7. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  8. JS几种数组遍历方式以及性能分析对比

    前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...

  9. js两种定义函数、继承方式及区别

    一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function ...

随机推荐

  1. iOS- iPhone App 如何运营？

    在质量过硬的情况下,如何运营才能使APP冲上app store的推荐?如何获得公众认可?获得下载量? 睡前简单分享一下最近从书中.互联网中浏览到的一些信息,和自己的一点理解. 首先这个问题很大.就抛砖 ...

  2. hdu2297Run（凸包的巧妙应用）

    链接 很巧妙的一道题,参考 把距离和速度分别作为x和y坐标,以斜率代表追赶速率,简直炫酷~ 具体看上面的博客,画的很清楚,就不再抄写一遍了. #include <iostream> #in ...

  3. IOS_改变UITextField placeHolder颜色、字体

    http://blog.sina.com.cn/s/blog_671d2e4f0101d90v.html

  4. HttpHelper类登录淘宝联盟并下载淘宝客订单xls

    本次开发环境与工具如下:IE9.0浏览器 + IE抓包插件HttpWatch +WIN7 64位系统 + VS2005 IDE + .NET 2.0框架本想上传HttpWatch抓包插件,但由于文件超 ...

  5. update

    update `表名` set 字段名 =replace(字段名, '查找的内容','更改的内容') where 字段名 like '%查找的内容%'; update shangpin set cli ...

  6. js中面向对象

    1.对象的表示方法,以下是对象的两种方法:第二种方法是使用函数构造器来创建一个对象. 2.对象的一种表达方式,这种方式更像Java中对象的创建,就是用一个new来创建一个对象实例.面向对象的封装.样式 ...

  7. Mac下安装Node.js

    今天介绍一下Mac下Node.js的下载安装方法,后面我们安装Bootstrap.Angurlar和jQuery等都是通过Node.js的npm方式的. 1.在必应中搜索“node.js mac”,第 ...

  8. 0518 Scrum 项目 5.0

     燃尽图: Sprint 1看板: 成员 团队贡献分 许佳仪 22 柯晓君 21 卓宇靖 18 赖文亮 19

  9. Python学习笔记之字符串

    一.字符串格式化 >>> format="Hello,%s. %s enough for ya?" >>> values=('World','H ...

  10. zju 1002

    // zju 1002 // #include "stdafx.h" #include <string> #include <iostream> using ...