1，新建web项目
盘点需要的目录：html页面，css样式，js功能，image图片资源，项目入口文件index.html
2，我们的页面为简单的三部分，如下图所示
index.html为项目入口文件，由于头部是菜单和一些用户的操作，底部是版权和一些用户信息，只有主体部分内容在变化，所以我将主题部分用iframe嵌套，头部尾部在index.html中：
<html lang="">
<head>
<!-- ... -->
</head>
<body>
<div id="devtrol" class="layout">
<div class="header">
<div class="logo">
<img class="avatar" src="./images/logo.png" alt="" />
<span class="title">标题</span>
</div>
<div class="nav">
<div class="nav_drop on" onclick="changeFrame(this,'menuA')">
菜单A
</div>
<div class="nav_drop" onclick="changeFrame(this,'menuB')">
菜单B
</div>
<div class="nav_drop" onclick="changeFrame(this,'menuC')">
菜单C
</div>
<div class="nav_drop" onclick="changeFrame(this,'menuD')">
菜单D
</div>
</div>
<div class="control">
<div class="ico">
<img
src="./images/btn_nav_login.png"
alt="icon"
title="扫码登录"
onclick="showQrCode()"
/>
<div class="qr-code-container">
<span class="icon"></span>
<div id="qrcode" ref="_qrcode"></div>
</div>
</div>
<div class="ico">
<i class="el-icon-minus" title="最小化"></i>
</div>
<div class="ico">
<i class="el-icon-full-screen" title="最大化"></i>
</div>
<div class="ico close">
<i class="el-icon-close" title="退出"></i>
</div>
</div>
</div>
<div class="layout_main">
<iframe
id="msgFrame"
name="msgFrame"
src="./htmls/database.html"
frameborder="0"
scrolling="yes"
></iframe>
</div>
<div class="layout_footer">
<div class="footer">
<div class="left">
<label>用户名：</label>
</div>
<div class="right">
<span class="leftmr pointer" data-v-fc756330=""> v0.0.1 </span>
</div>
</div>
</div>
</div>
</body>
<script>
let showTip = false;
let modal = null;
function changeFrame(obj, url) {
let elems = document.getElementsByClassName("nav_drop");
for (let i = 0; i < elems.length; i++) {
elems[i].className = "nav_drop";
}
obj.className = "nav_drop on";
document.getElementById("msgFrame").src = "./htmls/" + url + ".html";
}
function showQrCode() {
document.getElementsByClassName("qr-code-container")[0].style = showTip
? "display:none"
: "display:block;";
showTip = !showTip;
}
</script>
</html>
View Code
标签：index,菜单,html,showTip,构思,let,nav From： https://www.cnblogs.com/sxww-zyt/p/17108419.html