一般都是左侧的导航栏中的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 实现左侧菜单,右侧显示内容的更多相关文章

  1. C# 窗体 类似framest 左侧点击右侧显示 左侧菜单右侧显示

    首先托一个splitContainer调节大小位置 然后进行再新创建一个窗体名为add 在左侧拖入button按钮 进入代码阶段 更改属性 public Main() { InitializeComp ...

  2. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  3. ecshop用户中心菜单选项显示内容标签

    ecshop用户中心菜单选项有了,那肯定需要给相应的菜单选项添加内容,下面我们主要来讲下调用内容的标签,你也可以先访问一下用户中心菜单选项修改. 用户中心页面的内容分布在两个模板文件中:user_cl ...

  4. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

  5. 用JavaScript实现点击左侧列表右侧显示列表内容的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 解决IIS中运行TopJUI左侧菜单不显示的问题

    TopJUI演示系统中,模拟数据保存在.json文件中,目前发现有部分用户的IIS容器默认情况下是不支持.json文件的请求的,因此需要配置一下,可参考下文配置解决: 一.IIS 6 1. MIME设 ...

  7. 当chm文档点击左侧,右侧无内容时的解决方案

    右击chm文件->属性->安全选项卡,选择你登陆计算机的用户名,把权限改成完全控制就可以显示了

  8. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

  9. ajax实现简单的点击左侧菜单,右侧加载不同网页

    实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...

随机推荐

  1. webpack不打包指定的js文件

    背景: 在项目实际开发中,有一些IP地址需要随时修改,进行部署,例如websocket的地址.因此在项目打包的时候,不希望保持IP地址的文件被打包,因此就需要把需要修改的常量独立出来,存放在一个js文 ...

  2. STM32利用TIM3产生一个1--100Hz可调频率

    目标:利用TIM3结合普通GPIO实现一个1--100HZ的可控频率,误差在0.5HZ以内 核心:要实现该功能首先要明确频率的定义,频率就是1秒内发生周期性变化的次数,例如一个正弦波,1S内,走了15 ...

  3. CORS与JSONP的区别

    CORS与JSONP: a. JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求. b. 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSON ...

  4. oracle查询表空间的位置

    SELECT * FROM Dba_Data_Files ddf WHERE ddf.tablespace_name = 'TablespaceName'; 以上SQL代码可以查询出表空间的所在路径和 ...

  5. php 中引入邮箱服务 , 利用第三方的smtp邮件服务

    项目中用短信通知有时间限制,对一些频率比较大的信息力不从心. 使用邮箱发送信息是个不错的选择\(^o^)/! 首先要注册一个邮箱,在邮箱设置里开通smtp功能. 简单介绍下smtp,大概就是第三方客户 ...

  6. java类的属性

    类的嵌套!!!!!!!!!! 首先我们创建一个学生卡卡号的一个类,这个类有两个属性,校园卡号和银行卡号 package cuteSnow; public class StudentCard { pub ...

  7. 创业笔记-Node.js入门之基于事件驱动的回调

    基于事件驱动的回调 这个问题可不好回答(至少对我来说),不过这是Node.js原生的工作方式.它是事件驱动的,这也是它为什么这么快的原因. 你也许会想花点时间读一下Felix Geisendörfer ...

  8. ASP.NET-MVC中Entity和Model之间的关系

    Entity 与 Model之间的关系图 ViewModel类是MVC中与浏览器交互的,Entity是后台与数据库交互的,这两者可以在MVC中的model类中转换 MVC基础框架 来自为知笔记(Wiz ...

  9. Eclipse下的java工程目录问题和路径问题理解

    1.Eclipse下的java工程都有哪些文件夹? 答:new java project时,会默认创建SRC源代码目录,并默认创建一个bin目录作为输出目录,输出目录是指生成的class文件和配置文件 ...

  10. spring mvc 插入一条数据 返回该数据的主键编号

    import org.springframework.jdbc.core.PreparedStatementCreator; import org.springframework.jdbc.suppo ...