JS 选项卡（简单选项卡原理）

css部分

<style>
        div{
            width: 220px;
            height: 220px;
            border: 1px solid red;
            display: none;
        }
        .active{
            display: block;
        }
    </style>

html部分

<button style="background-color: green">按钮One</button>
<button>按钮Two</button>
<button>按钮Three</button>
<div class="active">1111111</div>
<div>2222222</div>
<div>3333333</div>

js部分

<script>
    //console.log(this);
    var btn = document.getElementsByTagName("button");
    var Div = document.getElementsByTagName("div");

    //给每个按钮添加点击事件
    for(var i = 0;i < btn.length;i++){

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

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

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

            //给当前按钮添加背景颜色 方法1      //fn(this); //方法2
            this.style.background = "green";
            //点击按钮时，通过 自定义属性 让对应的div显示出来
            Div[this.index].className = "active";
         }
    }
    function fn(obj) {
        obj.style.background = "red";
    }