js面向对象的写法实现Tab切换

最新推荐文章于 2022-07-22 13:08:37 发布

会飞的小蚂蚱

最新推荐文章于 2022-07-22 13:08:37 发布

阅读量301

点赞数

分类专栏： html js

本文链接：https://blog.youkuaiyun.com/hfdxmz_3/article/details/106418598

版权

js 同时被 2 个专栏收录

101 篇文章

订阅专栏

html

36 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 200px;
            height: 20px;
            background: white;
        }

        input.active {
            background: yellow;
        }

        #div1 div {
            width: 200px;
            height: 200px;
            background-color: #cccccc;
            display: none;
        }
    </style>
</head>

<body>
    <div id="div1">
        <input type="button" value="a">
        <input type="button" value="b">
        <input type="button" value="c">
        <div class="dv">a</div>
        <div class="dv">b</div>
        <div class="dv">c</div>
    </div>
</body>
<script>
    
    window.onload = function () {
        new TabSwitch('div1')
    }
    function TabSwitch(id) {
        var _this = this;
        var oDiv1 = document.getElementById(id);

        this.bTn = document.getElementsByTagName('input');
        this.aDiv = document.getElementsByClassName('dv');

        document.getElementsByTagName('input')[0].className = 'active';
        document.getElementsByClassName('dv')[0].style.display = 'block';

        for (var i = 0; i < this.bTn.length; i++) {
            this.bTn[i].index = i;
            this.bTn[i].onclick = function () {
                _this.fnClick(this);
            }
        }
    };
    
    TabSwitch.prototype.fnClick = function (oBtn) {
        for (var i = 0; i < this.bTn.length; i++) {
            this.bTn[i].className = '';
            this.aDiv[i].style.display = 'none';
        }
        oBtn.className = 'active';
        this.aDiv[oBtn.index].style.display = 'block';
    }
</script>

</html>