一般都是左侧的导航栏中的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. (2016北京集训十三)【xsy1531】魔法游戏 - Nim游戏

    题解: 好题!我的结论很接近正解了... 把一个数化成二进制,每次至少要拿走一位,最多全拿走,不能不拿.那么这就是一个经典的Nim问题了,子树异或起来就是根节点的答案,随便递推一下就行了. 代码: # ...

  2. 使用命令:ssh-add 时,出现 “Could not open a connection to your authentication agent.”

    为 GitHub 账号设置 SSH Key时, 使用命令:ssh-add,出现“Could not open a connection to your authentication agent”,解决 ...

  3. [USACO07OPEN]Catch That Cow

    题目:洛谷P1588.HDU2717 题目大意:有一个人在点$n$,一头牛在点$k$,人每秒能从$x$移动到点$x+1$.$x-1$.$2x$,牛不会动,求最少多少秒后人能移动到牛所在的$k$. 思路 ...

  4. 浅谈 Qt 布局那些事

    Qt 布局那些事是本文介绍的内容,直接进入主题.GridLayout是一个非常强大的布局管理器,它可以实现很多复杂的布局,名字中暗示它将所有控件放置在类似网格的布局中.^__^GridLayout有两 ...

  5. WinServer-IIS-MIME类型

    自定义类型的处理流程 1.浏览器问服务器,这是什么类型的文件 2.服务器告诉浏览器这是什么类型的文件(如果不告诉,那么浏览器就会下载相应文件) 3.浏览器告诉windows注册表这是什么类型的文件 4 ...

  6. CSS学习(五)

    导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的.在我们的例子中我们将建立一个 ...

  7. Maven多模块项目搭建

    最近一直在思考如何能够更好的重用代码.减少重复劳动,之前有一篇文章通过导入JAR包的形式,可以重用部分形如util类的方法,但是这样的话,管理起来jar包,特别是协同工作,多项目情况下,管理JAR会出 ...

  8. ORA-01733: virtual column not allowed here

    基表: hr.tt  scott.tt  视图1: 基于 hr.tt  union all  scott.tt ---> scott.ttt  视图2: 基于 视图1->scott.ttt ...

  9. 【手势交互】9. PS Move

    索尼研发体感控制技术已有10年,在过去那么多年里.尝试了3D摄像头.超声波和电磁感应等各种技术.最后还是觉得眼下的MOVE所使用的技术最为合适.PS Move是索尼于2010年9月份推出.用来让PS3 ...

  10. MainWndProc运行观察(有待研究)

    MainWndProc运行观察 把MainWndProc改写成如下代码,便于观察:procedure TWinControl.MainWndProc(var Message: TMessage);be ...