js实现tab栏切换效果（一）

利用javascript实现tab栏切换效果，其中原理“置之死地而后生”，先把所有人干掉，自己再复活。
直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 300px;
                margin: 100px auto;
                border: 1px solid #ccc;
            }
            .content div{
                width: 100%;
                height: 300px;
                background-color: gold;
                display: none;
                line-height: 300px;
                text-align: center;
            }
            .gold{
                background-color: gold;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var btns = document.getElementsByTagName("button");
                var divs = document.getElementById("dd").getElementsByTagName("div");
                for (var i=0;i<btns.length;i++) {
                    //因为上面的button按钮与下面的div盒子是一一对应关系，所以我们用一个序列号index来控制
                    //给每个btns[i]添加一个属性index
                    btns[i].index = i;
                    btns[i].onclick = function(){
                        for (var j=0;j<btns.length;j++) {
                            btns[j].className="";
                        }
                        // 先清空所有按钮的类名，再给当前的按钮添加一个类名  “置之死地而后生”
                        this.className="gold";
                        // 同理，首先隐藏所有的div盒子，再显示与button当前索引号相同的div盒子
                        for (var k=0;k<divs.length;k++) {
                              divs[k].style.display="none";
                        }
                        divs[this.index].style.display="block";
                    }

                }

            }
        </script>
    </head>
    <body>
       <div class="box">
           <div class="title">
               <button class="gold">语文</button>
               <button>数学</button>
               <button>英语</button>
               <button>物理</button>
           </div>
           <div class="content" id="dd">
               <div style="display: block;">语文内容介绍</div>
               <div>数学内容介绍</div>
               <div>英语内容介绍</div>
               <div>物理内容介绍</div>
            </div>
        </div>

</body>

</html>

这里写图片描述

其实代码还可以再进行优化，优化后的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 300px;
                margin: 100px auto;
                border: 1px solid #ccc;
            }
            button{
                cursor: pointer;
            }
            .content div{
                width: 100%;
                height: 300px;
                background-color: gold;
                display: none;
                line-height: 300px;
                text-align: center;
            }
            .gold{
                background-color: gold;
            }
            .content .show{
                display: block;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var btns = document.getElementsByTagName("button");
                var divs = document.getElementById("dd").getElementsByTagName("div");

                for (var i=0;i<btns.length;i++) {
                    // 给每一个button添加一个属性index  
                    btns[i].index=i;
                    btns[i].onclick = function(){
                        for (var j= 0;j<btns.length;j++) {
                            btns[j].className="";
                            divs[j].className="";
                        }
                        this.className = "gold";
                        divs[this.index].className="show";
                    }

                }
            }
        </script>
    </head>
    <body>
       <div class="box">
           <div class="title">
               <button class="gold">语文</button>
               <button>数学</button>
               <button>英语</button>
               <button>物理</button>
           </div>
           <div class="content" id="dd">
               <div class="show">语文内容介绍</div>
               <div>数学内容介绍</div>
               <div>英语内容介绍</div>
               <div>物理内容介绍</div>
            </div>
        </div>

</body>

</html>

想实现多tab栏切换效果，看js实现多tab切换效果

来源：CSDN

作者：diligentkong

链接：https://blog.csdn.net/diligentkong/article/details/54730366

标签

按钮

js代码

gold