二级页面的极简模板(帮助理解二级页面)

二级页面的极简模板(帮助理解二级页面)二级页面的极简版 帮助初学者理解 html 二级页面怎么做

大家好,欢迎来到IT知识分享网。

 1. 点击详情即可出现二级页面

2.点击删除即可还原最初页面

二级页面的极简模板(帮助理解二级页面)

二级页面的极简模板(帮助理解二级页面)

以下为源代码,快去试试吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style>
        .bgPop3{
            width:30rem;
            height:30rem;
            color:aqua;
            border:solid;
            display :none;
        }
        .pop3{
            width:20rem;
            height:20rem;
            color:antiquewhite;
            border:solid;
            display :none;
        }
        .m1{
            width:10rem;
            height:30rem;
            color:rgb(0, 0, 0);
            border:solid;
        }
       
       
    </style>
</head>
<body>
  <div class="m1">
    <span class="click_pop3" style="color:rgb(247, 190, 105) ">详情</span>
  </div>
  <div class="bgPop3" ></div>
     <div class="pop3">
        <span class="pop-close" style="color:rgb(247, 190, 105)">删除</span>      
     </div>
  
    <script>
        $(document).ready(function () {
            $('.pop-close').click(function () {
                $('.bgPop3,.pop3').hide();
            });
            $('.click_pop3').click(function () {
                $('.bgPop3,.pop3').show();
            });
        })
        
    </script>

</body>
</html>

 觉得有用的小伙伴们,为菜鸟小飞点个赞呗。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/146397.html

(0)
上一篇 2025-04-14 21:10
下一篇 2025-04-14 21:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信