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. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

  2. 初试 Matlab 之去除水印

    这几天很痛苦地去学习了下用 Matlab 来处理图像,其实那些算法我觉得还不算很难理解,可是 Matlab 这种反人类的语法(可能对于我来说是这样吧,毕竟熟悉了 C++ / Java 的语法一时间很难 ...

  3. php null o false ''

    php中很多还不懂php中0,"",null和false之间的区别,这些区别有时会影响到数据判断的正确性和安全性,给程序的测试运行造成很多麻烦.先看一个例子: <? $str ...

  4. java jar包解析:打包文件，引入文件

    java jar包解析:打包文件,引入文件 cmd下: jar命令:package包打包 javac命令:普通类文件打包 Hello.java: package org.lxh.demo; publi ...

  5. jq知识总结

    jQuery   jQuery基本选择器: id选择器     $("#div1") class选择器   $(".div1") 元素选择器   $(" ...

  6. cookie预：

    什么是cookie? cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie ...

  7. [转]为什么不能用memcached存储Session

    以下内容转自:http://www.infoq.com/cn/news/2015/01/memcached-store-session -------------------------分割线---- ...

  8. C#/ASP.NET MVC微信公众号接口开发之从零开发（三）回复消息 （附源码）

    C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...

  9. 转: 我们为什么使用ORM?

    博客园在推广ORM方面的确做了很大的贡献,很多的程序员开始使用ORM,不用写SQL的喜悦让他们激动不已,可是好景不长,他们很快发现众多的烦恼一个接一个的出现了. 很遗憾,我并不打算在这篇文章中解决这些 ...

  10. windows系统服务编程代码示例分享

    #include"XXXX.h" //包含的头文件 //定义全局函数变量 void Init(); BOOL IsInstalled(); BOOL Install(); BOOL ...