简单tab切换

搭建静态html

	<div class="wraper">
        <button class="active_btn">按钮01</button>
        <button>按钮02</button>
        <button>按钮03</button>
        <button>按钮04</button>
        <!-- 用来清除浮动 -->
        <div class="clear"></div>
        <div class="content">
            <div class="box active">我是内容0001</div>
            <div class="box">我是内容0002</div>
            <div class="box">我是内容0003</div>
            <div class="box">我是内容0004</div>
        </div>
    </div>

	/*对按钮的操作*/
	button{
        outline: none;
        appearance: none;
        border: none;
        width: 150px;
        height: 30px;
        float: left;
    }
    .clear{
        clear: both;
    }
    /*对应tab选项的内容*/
    .content{
        width: 600px;
        height: 200px;
        background-color: #ccc;
    }
    .box{
        height: 200px;
        text-align: center;
        display: none;
    }
    /*显示tab内容*/
    .active{
        display: block;
    }
    /*选中tab的样式*/
    .active_btn{
        background-color: aqua;
        color: blanchedalmond;
    }

运行如下：

处理事件

 		//1. 获取所有被操作的元素
        var btns = document.getElementsByTagName('button');
        var boxs = document.getElementsByClassName('box');
        //2. 给button按钮绑定点击事件
         for(var i = 0;i<btns.length;i++){
            (function(i){
            	//将点击的哪个对应的tab选项的索引值保存下来
                var a = i;
                btns[i].onclick = function(){
                	//清空所有的button按钮样式
	                for(var j = 0;j<btns.length;j++){
	                    btns[j].className = '';
	                    boxs[j].className = 'box';
	                }
	                //这边给按钮的class重新赋值
                    btns[a].className = 'active_btn';
                    boxs[a].className = 'box active';
                }
            })(i);
        }

运行如下：

总结

tab选项卡还是比较常见的，希望帮助到各位，更加深入了解javascript的知识，后面还会更新一些简单的demo的。