js排他思想

最新推荐文章于 2022-08-22 19:08:14 发布

天蓝蓝，水清清

最新推荐文章于 2022-08-22 19:08:14 发布

阅读量84

点赞数

分类专栏： API 文章标签： javascript api

本文链接：https://blog.csdn.net/weixin_57956396/article/details/118974088

版权

API 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求：
1.点击界面中按钮，将当前被点击的按钮的背景颜色变为gold色，其他的按钮恢复默认。
2、当点击按钮的时候，需要将这个按钮对应位置的div显示出来

  <style>
        .tab_con {
            width: 500px;
            height: 350px;
            margin: 50px auto 0;
        }

        .tab_btns {
            height: 50px;
        }

        .tab_btns input {
            width: 100px;
            height: 50px;
            background: #ddd;
            border: 0px;
            outline: none;
        }

        .tab_btns .active {
            background: gold;
        }

        .tab_cons {
            height: 300px;
            background: gold;
        }

        .tab_cons div {
            height: 300px;
            line-height: 300px;
            text-align: center;
            display: none;
            font-size: 30px;
        }

        .tab_cons .current {
            display: block;
        }
    </style>

<body>
    <div class="tab_con">
        <div class="tab_btns">
            <input type="button" value="按钮一" class="active">
            <input type="button" value="按钮二">
            <input type="button" value="按钮三">
        </div>
        <div class="tab_cons">
            <div class="current">按钮一对应的内容</div>
            <div>按钮二对应的内容</div>
            <div>按钮三对应的内容</div>
        </div>
    </div>
</body>

<script>
    
    // 1.获取元素
    var inp = document.querySelectorAll('input');
    var div = document.querySelectorAll('.tab_cons div');

    // 2.遍历
    for (var i = 0; i < inp.length; i++) {
    
         // 给按钮inp 设置索引号
        inp[i].setAttribute('index', i);

        inp[i].addEventListener('click', function () {

            for (var j = 0; j < inp.length; j++) {

                inp[j].className = '';

                div[j].className = '';

            }
            
            // 点击谁就得到相对应的类名
            this.className = 'active';

            // 下面和上面的对应
            var index = this.getAttribute('index');

            div[index].className = 'current';

        })
    }

</script>

天蓝蓝，水清清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js排他思想

需求：1.点击界面中按钮，将当前被点击的按钮的背景颜色变为gold色，其他的按钮恢复默认。2、当点击按钮的时候，需要将这个按钮对应位置的div显示出来生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1.点击界面中按钮，将当前被点击的按钮的背景颜色变为gold色，其他的按钮恢复默认。2、当点击按钮的时候，需要将这个按钮对应
复制链接

扫一扫