Tab选项卡（js）

实现效果与思路

今天来实现一个常用的功能tab选项卡。下图是基本的样式，当点击不同的选项卡标签时会展示不同的选项卡内容。

 

 

 

实现原理是首先给每个选项卡内容都隐藏，当点击选项卡时使其对应的内容显示就实现了tab选项切换的功能。

具体代码实现

1. 样式实现

<style>
        button{                //选项卡按钮
            appearance: none;
            outline: none;   //去除按钮外边框线
            float: left;     //本身display:inline-block 会使按钮之间有外边距
            border:none;
            width: 130px;
            height: 30px;
        }
        .clear{
            clear: both;
        }
        .content{
            width: 520px;
            height: 200px;
            background-color: blanchedalmond
        }
       
        .box{
            height: 200px;
            text-align: center;
            display: none;      //默认将所有的内容框隐藏
        }
         .active{
            display: block;    //将内容框显示
        }
        .active_btn{
            background-color: #403242;   //给点击的btn添加背景
            color: yellow;
        }
    </style>

方式一：  使用立即执行函数  

使用立即执行函数传参，保证点击事件函数中使用的i是当前点击的i， 为当前点击的按钮添加样式和内容的展示。否则在点击事件之前，上层for循环已经结束，i变为btns.length，所有按钮的事件函数所使用的i都会变成btns.length.

<script>
        //需求分析：当用户点击选项卡时 对应显示box 中内容
        //获取所有的元素
        var btns = document.getElementsByTagName('button');
        var boxs = document.getElementsByClassName('box');

//方式一 通过立即执行函数

        for (var i = 0; i < btns.length; i++) {
            (function (i) {  //使用立即执行函数传参，保证点击事件函数中使用的i是当前的i，否则在点击事件之前，上for循环已经结束，i变为btns.length，事件函数所使用的i也将为btns.length.
                var i = i;
                btns[i].onclick = function () {   //给每一个按钮添加点击事件
                    //每次点击之前 清空之前点击的所有的button按钮样式
                    for (var j = 0; j < btns.length; j++) {
                        btns[j].className = '  ';
                        boxs[j].className = 'box'
                    }
                    btns[i].className = 'active_btn';   //添加类名样式，给当前点击的按钮添加背景色
                    boxs[i].className = 'box active'  //让当前按钮对应的内容box显示
                }
            }
            )(i)
        } 


    </script>

方式二：使用let块级作用域，使每个事件函数中的i都是当前点击的 i 

<script>

        //需求分析：当用户点击选项卡时 对应显示box 中内容
        //获取所有的元素
        var btns = document.getElementsByTagName('button');
        var boxs = document.getElementsByClassName('box');


        for (let i = 0; i < btns.length; i++) {
                btns[i].onclick = function () {
                    //清空所有的button按钮样式
                    for (var j = 0; j < btns.length; j++) {
                        btns[j].className = '  ';
                        boxs[j].className = 'box'
                    }
                    btns[i].className = 'active_btn';
                    boxs[i].className = 'box active'
                }
        } 


    </script>