封装id样式显示和隐藏block-none

最新推荐文章于 2021-08-20 15:39:32 发布

前端小云儿

最新推荐文章于 2021-08-20 15:39:32 发布

阅读量115

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/119811856

版权

js 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

   <head>
       <meta charset="utf-8">
       <title></title>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link href="../css/mui.min.css" rel="stylesheet" />
       <style>
               .div1, #div1{
                   background-color: #0000FF;
                   width: 200px;
                   height: 200px;
               }
           .div2   ,#div2{
                   background-color: pink;
                   width: 200px;
                   height: 200px;
               }
       </style>
   </head>

   <body>
           <br />

           <button id="show">显示</button>
           <button id="hide">隐藏</button>
           <div id="div1">id</div>
           <div id="div2">id</div>
           <div class="div1">class</div>
           <div class="div2">class</div>
           <div></div>

       <script src="../js/mui.min.js"></script>
       <script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
       <script type="text/javascript">
           function showView(obj){
               document.getElementById(obj).style.display="block";
           }
           function HideView(obj){
              document.getElementById(obj).style.display="none";
           }
           document.getElementById('hide').addEventListener('tap',function () {
           HideView('div1');
                   showView('div2');
           })
           document.getElementById('show').addEventListener('tap',function () {
           HideView('div2');
           showView('div1');
           })
           </script>
   </body>