一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
实现菜单三级下拉 页面切换
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>平台</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.layui-this>a {
background-color: #2664F2 !important;
}
.layui-side .layui-side-scroll ul {
background-color: #4C7FF3 !important;
}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header" style="background-color: #4C7FF3;">
<div class=""
style="font-size: 24px;margin-right: 600px;font-weight: bold;color: #fff;margin-top: 12px;margin-left: 20px;">
<img src="img/logo.png" style="width: 40px;height: 40px;" />
平台
</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- <div onclick="window.open('http://39.105.38.63/smartsea2/')" style="margin-left: 1230px;line-height: 60px;font-size: 20px;cursor: pointer;">一张图</div> -->
<!-- <li class="layui-nav-item layui-hide-xs"><a href="http://39.105.38.63/smartsea2/"
target="blank">一张图</a></li> -->
<!-- <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
<dd><a href="">menu 11</a></dd>
<dd><a href="">menu 22</a></dd>
<dd><a href="">menu 33</a></dd>
</dl>
</li> -->
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="http://layui-doc.pearadmin.com/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
class="layui-nav-img">
超级管理员
</a>
<dl class="layui-nav-child">
<dd onclick="tcClick()"><a>退出</a></dd>
</dl>
</li>
<!-- <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li> -->
</ul>
</div>
<div class="layui-side" style="background-color: #4C7FF3;">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- layui-nav-itemed -->
<!-- <li class="layui-nav-item layui-nav-itemed">
<dd class="layui-this"><a href="http://39.105.38.63/smartsea2/">一张图</a></dd>
</li> -->
<li class="layui-nav-item">
<dd onclick="window.open('http://39.105.38.63/smartsea2/')">
<a>一张图</a>
</dd>
</li>
<li class="layui-nav-item">
<dd style="overflow: hidden;">
<a href="cbxx.html">
<img src="img/cbxx.png" style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">船舶信息</div>
</a>
</dd>
</li>
<li class="layui-nav-item" style="overflow: hidden;">
<a href="javascript:;"><img src="img/sbgl.png"
style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">设备管理</div>
</a>
<dl class="layui-nav-child">
<dd><a href="sbgl/dwsb.html">定位设备</a></dd>
<dd><a href="sbgl/jksb.html">监控设备</a></dd>
<dd><a href="sbgl/mjsb.html">门禁设备</a></dd>
</dl>
</li>
<li class="layui-nav-item" style="overflow: hidden;">
<a href="javascript:;"><img src="img/zhgl.png"
style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">综合管理</div>
</a>
<dl class="layui-nav-child">
<dd><a href="zhgl/yggl.html">渔港管理</a></dd>
<dd><a href="zhgl/cwgl.html">船位管理</a></dd>
<dd><a href="zhgl/jssbgl.html">救生设备管理</a></dd>
<dd><a href="javascript:;">人员管理</a>
<dl class="layui-nav-child">
<dd><a href="zhgl/rygl/jgry.html">监管人员</a></dd>
<dd><a href="zhgl/rygl/cygl.html">船员管理</a></dd>
</dl>
</dd>
</dl>
</li>
<li class="layui-nav-item" style="overflow: hidden;">
<a class="" href="javascript:;"><img src="img/bj.png"
style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">报警</div>
</a>
<dl class="layui-nav-child">
<dd><a href="bj/bdbkjbj.html">北斗不开机报警</a></dd>
<dd><a href="bj/bdfcxbj.html">北斗防拆卸报警</a></dd>
<dd><a href="bj/bdgjbj.html">北斗关机报警</a></dd>
<dd><a href="bj/yjblbj.html">越界捕捞报警</a></dd>
<dd><a href="bj/sbztbj.html">设备状态报警</a></dd>
<dd><a href="bj/kywgycbj.html">可疑违规渔船报警</a></dd>
<dd><a href="bj/xyqchbj.html">休渔期出海报警</a></dd>
</dl>
</li>
<li class="layui-nav-item" style="overflow: hidden;">
<dd><a href="dzwl.html"><img src="img/dzwl.png"
style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">电子围栏</div>
</a></dd>
</li>
<li class="layui-nav-item" style="overflow: hidden;">
<a href="javascript:;"><img src="img/tjfx.png"
style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">统计分析</div>
</a>
<dl class="layui-nav-child">
<dd><a href="tjfx/crgtj.html">出入港统计</a></dd>
<dd><a href="tongjifenxi/zaigangqingkuanglist.html">在港情况统计</a></dd>
<dd><a href="tongjifenxi/yujingshijianlist.html">预警事件统计</a></dd>
<dd><a href="tongjifenxi/kaiguanjilist.html">开关机统计</a></dd>
</dl>
</li>
<li class="layui-nav-item" style="overflow: hidden;">
<a href="javascript:;"><img src="img/ldxx.png"
style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">雷达信息</div>
</a>
<dl class="layui-nav-child">
<dd><a href="leida/guiji.html">轨迹</a></dd>
</dl>
</li>
<li class="layui-nav-item" style="overflow: hidden;"><a href="jinchugangxinxi.html"><img
src="img/jcgxx.png" style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">进出港信息</div>
</a></li>
<li class="layui-nav-item" style="overflow: hidden;"><a href="gangkoujigangqu.html"><img
src="img/gkjgq.png" style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">港口及港区</div>
</a></li>
<li class="layui-nav-item" style="overflow: hidden;"><a href="feifaquyu.html"><img
src="img/ffqy.png" style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">非法区域</div>
</a></li>
<li class="layui-nav-item" style="overflow: hidden;"><a href="linghaijixian.html"><img
src="img/lyjx.png"
style="margin-right: 10px;float: left;margin-top: 10px;width: 20px;height: 20px;" />
<div style="float: left;">领海基线及协定水域</div>
</a></li>
<li class="layui-nav-item" style="overflow: hidden;">
<a href="javascript:;"><img src="img/qx.png"
style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">气象数据</div>
</a>
<dl class="layui-nav-child">
<dd><a href="qixiangshuju/qiyalist.html">气压</a></dd>
<dd><a href="qixiangshuju/qiwenlist.html">气温</a></dd>
<dd><a href="qixiangshuju/hailanglist.html">海浪</a></dd>
<dd><a href="qixiangshuju/haifenglist.html">海风</a></dd>
<dd><a href="qixiangshuju/hailiulist.html">海流</a></dd>
<dd><a href="qixiangshuju/fengchanglist.html">风场</a></dd>
<dd><a href="javascript:;">预报</a>
<dl class="layui-nav-child">
<dd><a href="yubao/haiquyubaolist.html">海区预报</a></dd>
<dd><a href="yubao/taifeng.html">台风</a></dd>
</dl>
</dd>
<dd><a href="chaoxilist.html">潮汐</a></dd>
</dl>
</li>
<li class="layui-nav-item" style="overflow: hidden;"><a href="wangge.html"><img src="img/wg.png"
style="margin-right: 10px;float: left;margin-top: 10px;" />
<div style="float: left;">网格</div>
</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<!-- 首页 -->
<iframe id="iframeMain" src="" style="width: 99%;height:100%;border: none;"></iframe>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
<div style="text-align: right;">©技术有限公司</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
function tcClick() {
window.location.href = 'http://192.168.1.231:56/login.html'
}
//左侧菜单
$(document).ready(function() {
$("dd>a").click(function(e) {
e.preventDefault();
$("#iframeMain").attr("src", $(this).attr("href"));
});
$("li>a").click(function(e) {
e.preventDefault();
$("#iframeMain").attr("src", $(this).attr("href"));
});
});
</script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function() {
var element = layui.element,
layer = layui.layer,
util = layui.util,
$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis) {
layer.msg('展开左侧菜单的操作', {
icon: 0
});
},
menuRight: function() {
layer.open({
type: 1,
content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
area: ['260px', '100%'],
offset: 'rt' //右上角
,
anim: 5,
shadeClose: true
});
}
});
});
</script>
</body>
</html>
