tab_tabas.txt-CSDN博客

本文链接：https://blog.csdn.net/personaas/article/details/103244653

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 800px;
            height:500px;
            margin: 30px auto;
            background: pink;
            text-align: center;
        }
        #box>div{
            display: none;
            border: 3px solid yellow;
            width: 450px;
            height:400px;
            margin: auto;
        }
        .red{
            background: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <input type="text" value="aaa">
        <input type="text" value="bbb">
        <input type="text" value="ccc">
        <div style="display: block">aaa</div>
        <div>bbb</div>
        <div>ccc</div>
    </div>
</body>
</html>
<script>

    var box = document.getElementById('box')
    var inp = box.getElementsByTagName('input')
    var divs = box.getElementsByTagName('div')
    for(var i=0;i<inp.length;i++){
        inp[i].index = i;
        inp[i].onclick = function () {
                for(var i=0;i<inp.length;i++){
                    inp[i].className=''
                    divs[i].style.display = 'none'
                }
            this.className = 'red'
            divs[this.index].style.display = 'block'
        }
    }
//    面向对象的写法
//    function Tab(id) {
//        this.box = document.getElementById(id)
//        this.inp = box.getElementsByTagName('input')
//        this.divs = box.getElementsByTagName('div')
//        for(var i=0;i<this.inp.length;i++){
//            this.inp[i].index = i;
//            var _this = this//存下原来的this,用原来的this调用事件
//            this.inp[i].onclick = function () {//点击事件里的this发生改变
//                _this.change(this.index)
//            }
//        }
//    }
//    Tab.prototype.change = function (x) {
//        for(var i=0;i<this.inp.length;i++){
//            this.inp[i].className=''
//            this.divs[i].style.display = 'none'
//        }
//        this.inp[x].className = 'red'
//        this.divs[x].style.display = 'block'
//    }
//    new Tab('box')
</script>