ifram 实现左侧菜单,右侧显示内容

一般都是左侧的导航栏中的a标签中写一个target(a标签有target属性),

右侧的div标签中写一个iframe,在iframe中有name的属性,在左侧a标签中的target写上iframe中name的属性值。具体操作如下:

1、设置菜单(a标签增加target属性,值填写iframe的name值)

<li class="layui-nav-item"><a href="/about" target="menuFrame">了解itggek</a></li>

1、增加一个iframe(自定义name),用来展示每个菜单的内容

  th:src="@{/about}":是为了默认展示一个页面内容
  <!-- 内容主体区域 -->
<div class="layui-body">
<iframe id="menuFrame" name="menuFrame" th:src="@{/about}" style="overflow: visible;"
scrolling="yes" frameborder="no" width="100%" height="100%">
</iframe>
</div>

3、系统截图:(点击了解itgeek就会将内容展示在右侧空白的iframe中)

可以直接进入系统,就默认展示一个页面:在iframe中src增加请求地址(非web项目,直接填写文件地址)

ifram 实现左侧菜单,右侧显示内容

上一篇:SpringBoot配置logback


下一篇:MongoDB:利用官方驱动改装为EF代码风格的MongoDB.Repository框架 一