js学习之基础篇综合练习自动选项卡（自己实现版）

最新推荐文章于 2024-05-24 23:45:01 发布

晓秒四下

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量262

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/MENGCHIXIANZI/article/details/105349116

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

写的不好啊，自己没看讲解，先自己实现了一版。

总的原理就是控制三个div 的显示 || 不显示，以及三个相应按钮的颜色普通色 || 高亮色。

<!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 type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        #clickGroup,#autoGroup{
            margin: 10px;
            padding: 10px;
        }

        h1{
            color:tomato;
        }

        #clickGroup>div,#autoGroup>div{
            width: 200px;
            height: 200px;
            background-color: pink;   
            border: 1px salmon solid; 
            /* div都不显示 */
            display: none;
        }

        /* 初始时候，只显示第一个div */
        #clickGroup>div:first-of-type,#autoGroup>div:first-of-type{
            display: block;
        }

        /* button:first-of-type{
            background-color: pink;   
        } */
    </style>
</head>
<body>
    <h1>点击事件组</h1>
    <div id="clickGroup">
        
        <button id="btn1">选项1</button>
        <button id="btn2">选项2</button>
        <button id="btn3">选项3</button>
        <div id="div1">DIV1</div>
        <div id="div2">DIV22</div>
        <div id="div3">DIV333</div>
    </div>
    
    <h1>自动播放组</h1>
    <div id="autoGroup">

        <button id="btn1">选项1</button>
        <button id="btn2">选项2</button>
        <button id="btn3">选项3</button>
        <div id="div1">DIV1</div>
        <div id="div2">DIV22</div>
        <div id="div3">DIV333</div>
    </div>


    <script type="text/javascript">
       
        common_start///
        function show(divArray,buttonArray,i){
            // 【4】隐藏所有的div
            for(let j = 0 ;j<divArray.length;j++){
                    divArray[j].style.display='none';
                }
                
            // 【5】去掉所有button的背景颜色
            for(let k = 0;k<buttonArray.length;k++){
                buttonArray[k].style.backgroundColor = '';
            }

            // 【6】显示需要显示的div
            // 高亮所选button
            divArray[i].style.display='block';
            buttonArray[i].style.backgroundColor = 'pink';
        }
        common_end///


        点击事件组_start///
        // 【1】选中所有的div
        let divArrayC = [...document.body.querySelectorAll('#clickGroup>div')];

        // 【2】绑定button的事件
        // 根据button的点击事件 控制 div的隐藏与显示
        let buttonArrayC = [...document.body.querySelectorAll('#clickGroup>button')];

        // console.log(buttonArray[0].style.backgroundColor);
        buttonArrayC[0].style.backgroundColor = 'pink';

        for(let i = 0;i<buttonArrayC.length;i++){
            buttonArrayC[i]['onclick']=()=>{
                // 【3】测试一下有没有绑定成功
                // alert(i);

                show(divArrayC,buttonArrayC,i);
            }
        }
        点击事件组_end///
        
        
        自动播放组_start///
        // 【1】选中所有的div
        let divArrayA = [...document.body.querySelectorAll('#autoGroup>div')];

        // 【2】绑定button的事件
        // 根据button的点击事件 控制 div的隐藏与显示
        let buttonArrayA = [...document.body.querySelectorAll('#autoGroup>button')];

        buttonArrayA[0].style.backgroundColor = 'pink';
        let index = 0;
        setInterval(() => {
            // for(let index=0;index<3;index++){
                show(divArrayA,buttonArrayA,index);
                index++;
                if(index==3){
                    index=0;
                }
            // }
        }, 1000);
        // setInterval;
        自动播放组_end///

    </script>
</body>
</html>

仅供参考。。。。。。

运行结果如下

顺便安利一个调试的小贴士

【调试小贴士】

红框的那个地方就是你选中那个元素，你要是想找到这个元素边距宽高啊什么的，变蓝的地方，你方向键盘的上 || 下就可以变大变小的看效果。找到最适合你的！！！

晓秒四下

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js学习之基础篇综合练习自动选项卡（自己实现版）

写的不好啊，自己没看讲解，先自己实现了一版。总的原理就是控制三个div 的显示 || 不显示，以及三个相应按钮的颜色普通色 || 高亮色。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con...
复制链接

扫一扫