js学习之 promise 练习demo 自动选项卡

最新推荐文章于 2024-03-06 16:58:19 发布

晓秒四下

最新推荐文章于 2024-03-06 16:58:19 发布

阅读量275

点赞数

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

版权

JavaScript 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

关于 querySelectorAll 方法的解释

利用标签模板来实现自动选项卡的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=a, initial-scale=1.0"> -->
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .outNode>div{
            width: 200px;
            height: 200px;
            background-color: pink;
            color:darkred;
            border:solid 1px black;
            display: none;
        }
        .outNode>div:first-of-type{
            display: block;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        // $ 函数名 
        // obj 函数参数
        // ... 扩展运算符
        // 以数组的形式，把我选中的东西全部选中
        // querySelectorAll 选择符合 obj 这个参数的元素数组
        $=obj=>[...document.querySelectorAll(obj)];

        // json数据
        const jsonData={
            'valueName':['选项1','选项2','选项3'],
            'innerHtml':['内容层1','内容层22','内容层333']
        }

        // 遍历json.valueName.map
        // 根据jsonData 来创建节点
        // <div class="outNode"><input type=button value='选项1'></div>
        const createNode=json=>`<div class="outNode">
            ${json.valueName.map((x)=>`<input type=button value=${x}>`).join('')}
            ${json.innerHtml.map((x)=>`<div>${x}</div>`).join('')}
            </div>`;

        // 调用创建节点的method
        document.body.innerHTML = createNode(jsonData);

        // 点击以后，去掉所有的div
        let allInput = new Set($('input'));
        let allDiv = new Set($('.outNode>div'));

        // 给三个按钮绑定 click 事件 
        [...allInput].forEach((x,y)=>{
            x['onclick']=()=>{
                //alert(123);
                // 遍历三个div 全部隐藏
                [...allDiv].forEach((ddiv)=>{
                    ddiv.style.display="none";
                });
                // 只显示该切换到的那个div 
                [...allDiv][y].style.display='block';
            }
        })
    
    </script>
    
</body>
</html>

晓秒四下

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js学习之 promise 练习demo 自动选项卡

关于 querySelectorAll 方法的解释利用标签模板来实现自动选项卡的功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=a, initia...
复制链接

扫一扫