面向对象的选项卡

最新推荐文章于 2021-08-23 10:18:21 发布

置顶栈长

最新推荐文章于 2021-08-23 10:18:21 发布

阅读量577

点赞数 1

分类专栏：面向对象文章标签：面向对象选项卡 js

本文链接：https://blog.csdn.net/wdzhszyq/article/details/73823589

版权

面向对象专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        body{
            background: #000;
        }
        section{
            width: 400px;
            height: 400px;
            border: 1px solid #fffce7;
            margin: 10px 0;
        }
        #box div,#box2 div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: none;
            border-radius: 30px;
            margin-top: 10px;
            color: #fff;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
        }
        #box input,#box2 input{
            width: 100px;
            height: 40px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body>
<section id="box">
    <input type="button" value="按钮1" style="background: hotpink">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <div style="display: block;border-color: hotpink">1</div>
    <div>2</div>
    <div>3</div>
</section>
<section id="box2">
    <input type="button" value="按钮1" style="background: hotpink">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <div style="display: block;border-color: hotpink">1</div>
    <div>2</div>
    <div>3</div>
</section>

</body>
<script>
    //调用传参
window.onload=function () {
        new Tab('box');
        new Tab('box2');
    };
    //属性
    var btns=null;
    var oDiv=null;

    function Tab(id) {
    var _this=this;
    //console.log(_this);//指tab，调用的对象
    //console.log(this);//指tab，调用的对象
    var  box=document.getElementById(id);
    this.btns=box.getElementsByTagName('input');
    this.oDiv=box.getElementsByTagName('div');

    for(var i=0;i<this.btns.length;i++){
        this.btns[i].index=i;//索引
        this.btns[i].onclick=function(){
            _this.click(this);
            console.log(this);//指当前按的按钮
            console.log(_this);//指tab，调用的对象
        }
    }
}
    //方法；
    Tab.prototype.click=function(btns) {
        for(var i=0;i<this.oDiv.length;i++){
            this.btns[i].style.background='';//点击后先清除所有的按钮背景
            console.log(this);//指tab，调用的对象
            this.oDiv[i].style.display='none';
            this.oDiv[i].style.borderColor='hotpink';
        }
        this.oDiv[btns.index].style.display='block';//this指当前点击的元素按钮
        this.oDiv[btns.index].style.borderColor='hotpink';
        btns.style.background='hotpink';//给当前按钮加背景
    }

</script>
</html>

这里写图片描述