tab栏切换（二）

来源：互联网发布：装修甲醛来自哪里知乎编辑：程序博客网时间：2024/06/08 03:40

Tab栏切换原理详解（我自己的见解）
Tab栏切换原理：
例1：给一组button，点击不同的button按钮，被点击的按钮背景色发生变化，没有被点击的按钮颜色保持默认。
这里写图片描述

方法：遍历所有的button按钮，清除所有的button按钮的类名（class）。给当前的按钮添加一个类名（class），这个类能实现想要的背景色。这种方法的思想我们叫做排他思想：干掉所有人，只剩下自己。`

<style type="text/css">            .current{                background-color: pink;            }        </style>        <script>            window.onload = function(){                var btns = document.getElementsByTagName("button");                for (var i = 0; i<btns.length;i++) {                    //做点击事件                    btns[i].onclick = function(){                        //清除所有人的类名                        for (var j = 0; j < btns.length;j++) {                            btns[j].className = "";                        }                        // 只剩下自己，而且是点击的那一个                        //this指向事件的调用者                        this.className = "current";                    }                }            }        </script>    </head>    <body>        <button class="current">思想原理</button>        <button>思想原理</button>        <button>思想原理</button>        <button>思想原理</button>        <button>思想原理</button>        <button>思想原理</button>

例2：tab栏切换（简单易懂的代码）
Tab栏的切换效果其实也是用到了排他思想。当点击button按钮的时候，就显示与之相关的div标签。（怎样显示呢）这就需要得到上面button按钮的索引号，利用索引号显示下面的内容。（让下面所有的盒子都隐藏，只露出想要显示的那个盒子）
这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            .box{                width: 320px;                margin: 100px auto;                border: 1px solid #CCCCCC;            }            .bottom div{                width: 100%;                height: 300px;                background-color: pink;                display: none;            }            .current{                background-color: purple;            }            .bottom div.show{                display: block;            }            .hidden{                display: none;            }        </style>        <script type="text/javascript">            window.onload = function(){                var btns = document.getElementsByTagName("button");                var divs = document.getElementById("divs").getElementsByTagName("div");                for (var i = 0; i < btns.length;i++) {                    btns[i].index = i;//给每个btn一个index属性 索引号                    btns[i].onclick = function(){                        //alert(this.index);                        // 清除所有的类名                        for (var j = 0; j< btns.length;j++) {                        btns[j].className = "";                        }                        //只留下自己的  给当前的按钮添加类名                        this.className = "current";                        //先隐藏下面所有的盒子，再单独显示想要显示的那个（与索引号相关的）                        for (var k = 0; k <  divs.length;k++) {                            divs[k].className = "hidden";                        }                        divs[this.index].className = "show";                    }                }            }        </script>    </head>    <body>        <div class="box">            <div class="top">                <button>第一个</button>                <button>第二个</button>                <button>第三个</button>                <button>第四个</button>                <button>第五个</button>            </div>            <div class="bottom" id="divs">                <div class="show">1号盒子</div>                <div>2号盒子</div>                <div>3号盒子</div>                <div>4号盒子</div>                <div>5号盒子</div>            </div>        </div>    </body></html>

由于两个for循环内容有相似的，故合并for循环

<script type="text/javascript">            window.onload = function(){                var btns = document.getElementsByTagName("button");                var divs = document.getElementById("divs").getElementsByTagName("div");                for (var i = 0; i < btns.length;i++) {                    btns[i].index = i;                    btns[i].onclick = function(){                        //清除所有的类名                        for (var j = 0;j<btns.length;j++) {                            btns[j].className = "";                            divs[j].className = "";                        }                        //只留下自己 添加一个类名                        btns[this.index].className = "current";                        divs[this.index].className = "show";                    }                }            }        </script>

0 0