<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后臺大布局 - Layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域(可配合layui已有的垂直導航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="index1.html">列表一</a></dd>
<dd><a href="index2.html">列表二</a></dd>
<dd><a href="index3.html">列表三</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 內容主體區域 -->
<div style="padding:100px;width: 100%;height: 100%;">
<iframe src="" width="100%" height="100%" " id="iframeMain"></iframe>
</div>
</div>
<script src="layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(".layui-nav-child a").click(function(e){
e.preventDefault();
$("#iframeMain").attr("src",$(this).attr("href"));
})
})
</script>
</body>
</html>
layui側邊欄跳轉
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。