JS 实现选项卡

CSS部分

<style>
        *{
            margin: 0;
            padding: 0;
            outline: transparent;
        }
        #box{
            width: 600px;
            margin: 100px auto;
        }
        #box div{
            width: 600px;
            height: 400px;
            //border: 1px solid red;
            display: none;
            text-align: center;
            font-size: 30px;
        }
        #box button{
            float: left;
            border-left:1px solid #eee ;
            width: 120px;
            height: 30px;
            background-color:#efefd6;
        }
        #box .active{
            display: block;
        }
    </style>

html部分

<div id="box">
    <button style="background-color: orange">按钮One</button>
    <button>按钮Two</button>
    <button>按钮Three</button>
    <button>按钮Four</button>
    <button>按钮Five</button>
    <div class="active"><img src="img/1.jpg" alt=""></div>
    <div><img src="img/2.jpg" alt=""></div>
    <div><img src="img/3.jpg" alt=""></div>
    <div><img src="img/4.jpg" alt=""></div>
    <div><img src="img/5.jpg" alt=""></div>
</div>

JS部分

<script>
    var box = document.getElementById("box");
    var btn = box.getElementsByTagName("button");
    var Div = box.getElementsByTagName("div");
    //给每个按钮添加点击事件
    for(var i = 0;i < btn.length;i++){

        // 给每个按钮添加 自定义属性（理解为标记）(用于调用对应的div)
        btn[i].index = i;

        //点击按钮时，给当前按钮添加背景颜色
        btn[i].onclick = function () {
            clearInterval(Act);

            //先清空所有的按钮颜色 和 隐藏所有div.
            for(var j = 0;j < btn.length;j++){
                btn[j].style.background = "";
                Div[j].className = "";
            }

            //给当前按钮添加背景颜色 方法1
            this.style.background = "orange";
            //点击按钮时，通过 自定义属性 让对应的div显示出来
            Div[this.index].className = "active";
            n = this.index;
            Act = setInterval(fn,1500);
        }
    }
    //计时器，模拟点击事件
    var n = 0;
    function fn() {
        n++;
        if(n == btn.length){n = 0}
        btn[n].click(); //click() 方法用于在单选按钮上模拟一次鼠标点击：
    }
    var Act = setInterval(fn,1500);