面向对象版选项卡

最新推荐文章于 2020-04-11 23:58:33 发布

weixin_30602505

最新推荐文章于 2020-04-11 23:58:33 发布

阅读量92

点赞数

原文链接：http://www.cnblogs.com/qiudongjie/p/6602716.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
            list-style: none;
        }
        #box1,#box2,#box3{
            width:500px;
            height:500px;
            border:1px solid red;
        }
        #box1 input,#box2 input,#box3 input{
            background: yellow;
        }
        #box1 .active,#box2 .active,#box3 .active{
            background: red;
        }
        #box1 div,#box2 div,#box3 div{
            width:300px;
            height:300px;
            background: red;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            display: none;
        }
        #box1 .show,#box2 .show,#box3 .show{
            display: block;
        }
    </style>
</head>
<body>
    <div id="box1">
        <input type="button" value="按钮1" class="active">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div id="box2">
        <input type="button" value="按钮1" class="active">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
        <input type="button" value="按钮4">
        <input type="button" value="按钮5">
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <div id="box3">
        <input type="button" value="按钮1" class="active">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
        <input type="button" value="按钮4">
        <input type="button" value="按钮5">
        <input type="button" value="按钮6">
        <input type="button" value="按钮7">
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
    <script>
        function tab(id) {
            var _this = this;
            this.oBox = document.getElementById(id);
            this.aBtn = this.oBox.getElementsByTagName('input');
            this.aBox = this.oBox.getElementsByTagName('div');
            for (var i=0; i<this.aBtn.length; i++) {
                this.aBtn[i].index = i;
                this.aBtn[i].onclick = function () {
                    _this.fnClick(this)
                }
            }
            tab.prototype.fnClick = function (oBtn) {
                for (var i=0; i<this.aBtn.length; i++) {
                    this.aBtn[i].className = '';
                    this.aBox[i].className = '';
                }
                this.aBox[oBtn.index].className = 'show';
                oBtn.className = 'active';
            }
        }
        new  tab('box1');
        new  tab('box2');
        new  tab('box3');
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/qiudongjie/p/6602716.html

weixin_30602505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象版选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; ...
复制链接

扫一扫