1. 点击详情即可出现二级页面
2.点击删除即可还原最初页面
![二级页面设计图片_什么叫二级页面[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/11bb79657db8489c82475a438a1e377b.png "二级页面设计图片_什么叫二级页面[通俗易懂]插图")
![二级页面设计图片_什么叫二级页面[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/749e14b44b244c1d8780f781fdf895d4.png "二级页面设计图片_什么叫二级页面[通俗易懂]插图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://bianchenghao.cn/87697.html
