js面向过程的选项卡

最新推荐文章于 2022-07-06 08:32:49 发布

置顶栈长

最新推荐文章于 2022-07-06 08:32:49 发布

阅读量327

点赞数

分类专栏：面向对象案类文章标签： javascript 选项卡面向过程的选项卡

本文链接：https://blog.youkuaiyun.com/wdzhszyq/article/details/73844817

版权

面向对象同时被 2 个专栏收录

14 篇文章

订阅专栏

案类

4 篇文章

订阅专栏

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        body{
            background: #000;
        }
        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;
        }
        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>

</body>
<script>
    window.onload=function () {

            //var obox=document.getElementById(id);
            var btns=document.getElementsByTagName('input');
            var oDiv=document.getElementsByTagName('div');

            for(var i=0;i<btns.length;i++){
                btns[i].index=i;//索引
                btns[i].onclick=function () {
                    for(var i=0;i<oDiv.length;i++){
                        btns[i].style.background='';//点击后先清除所有的按钮背景

                        oDiv[i].style.display='none';
                        oDiv[i].style.borderColor='hotpink';
                    }
                    oDiv[this.index].style.display='block';//this指当前点击的元素按钮
                    oDiv[this.index].style.borderColor='hotpink';
                    this.style.background='hotpink';//给当前按钮加背景
                }
            }
    }
</script>
</html>

这里写图片描述