通过原生的方法来实现隐藏显示

最新推荐文章于 2021-06-03 17:13:50 发布

真实的曼巴

最新推荐文章于 2021-06-03 17:13:50 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： html5 js

本文链接：https://blog.csdn.net/gongstrong123/article/details/50413442

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

可以通过原生的方法来实现隐藏显示
通过设置一个自定义标签 data－flag 绑定指控区域中的关联的东西（某种对应关系），

这里还可以不设置直接用 for循环中的 i 来关联也是可以的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .btn {
            background: green;
            width: 400px;
            height: 100px;
            cursor: pointer;
            border: 1px solid red;
        }

        .page {
            width: 500px;
            height: 100px;
            background: yellowgreen;
        }
    </style>
</head>
<body>
<div class="btn" data-flag="1"></div>
<section class="div1 page" data-t="false" id="page1" style="display: none"></section>
<div class="btn" data-flag="2"></div>
<section class="div2 page" data-t="false" id="page2" style="display: none"></section>
<div class="btn" data-flag="3"></div>
<section class="div3 page"  data-t="false" id="page3" style="display: none"></section>
</body>

<script>

    var eles = document.getElementsByClassName('btn');
    for (var i = 0; i < eles.length; ++i) {
        eles[i].onclick = function () {
            console.log(this.dataset.flag);
            var page = document.getElementById('page' + this.dataset.flag);
             var t = page.style.display;
            if(t=='none'){
                page.style.display='';
            }else{
                page.style.display='none';
            }

        }

    }
    //    document.getElementById("a").onclick = function () {
    //        alert('aa');
    //    }
</script>
</html>

效果图如下
隐藏
这里写图片描述

显示
这里写图片描述

真实的曼巴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过原生的方法来实现隐藏显示

可以通过原生的方法来实现隐藏显示通过设置一个自定义标签 data－flag 绑定指控区域中的关联的东西（某种对应关系），这里还可以不设置直接用 for循环中的 i 来关联也是可以的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>
复制链接

扫一扫