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 实现左侧菜单,右侧显示内容的更多相关文章
- C# 窗体 类似framest 左侧点击右侧显示 左侧菜单右侧显示
首先托一个splitContainer调节大小位置 然后进行再新创建一个窗体名为add 在左侧拖入button按钮 进入代码阶段 更改属性 public Main() { InitializeComp ...
- C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
- ecshop用户中心菜单选项显示内容标签
ecshop用户中心菜单选项有了,那肯定需要给相应的菜单选项添加内容,下面我们主要来讲下调用内容的标签,你也可以先访问一下用户中心菜单选项修改. 用户中心页面的内容分布在两个模板文件中:user_cl ...
- 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
- 用JavaScript实现点击左侧列表右侧显示列表内容的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决IIS中运行TopJUI左侧菜单不显示的问题
TopJUI演示系统中,模拟数据保存在.json文件中,目前发现有部分用户的IIS容器默认情况下是不支持.json文件的请求的,因此需要配置一下,可参考下文配置解决: 一.IIS 6 1. MIME设 ...
- 当chm文档点击左侧,右侧无内容时的解决方案
右击chm文件->属性->安全选项卡,选择你登陆计算机的用户名,把权限改成完全控制就可以显示了
- ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...
- ajax实现简单的点击左侧菜单,右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...
随机推荐
- jmeter+ant+jenkins持续集成
邮件.报告插件和jenkins的war包下载地址:链接:https://pan.baidu.com/s/1gZJ53x50bxVyEsQFjdCkog 密码:1jtz 1.下载ant 网盘地址:链接 ...
- [USACO17JAN] Subsequence Reversal序列反转 (dfs+记忆化)
题目大意:给你一个序列,你可以翻转任意一段子序列一次,求最长不下降子序列长度 tips:子序列可以不连续,但不能破坏在原序列中的顺序 观察数据范围,n<=50,很小,考虑dfs *dfs来跑区间 ...
- 八、frps服务端与nginx可共用80端口
我的服务器,已经用nginx 做网站了,80端口只有一个,我还想我的frps一起使用,可以吗?这个是可以实现的,利用nginx的反向代理实现. 以下是在frps服务器上安装的nginx配置文件中设置的 ...
- 解决utf8' codec can't decode byte 0xe5 in position 0: unexpected end of data
使用unicode对象的话,除了这样使用u标记,还可以使用unicode类以及字符串的encode和decode方法. unicode类的构造函数接受一个字符串参数和一个编码参数,将字符串封装为一个u ...
- 《你又怎么了我错了行了吧》第九次团队作业:Beta冲刺与验收准备
项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十三 团队作业9 团队名称 你又怎么了我错了行了吧 作业学习目标 (1)掌握软件黑盒测试技术: (2)学会编制软件项目总结PPT. ...
- javaScript将string转换成array,并将汉字按汉语拼音排序方法
亲测,代码如下: var str = '中华人民共和国民主富强': var arr = str.split("");//字符串装换数组方法一 //arr = str.replace ...
- Cocos2d-x 3.4 之 消灭星星 > 第三篇(终) <
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- Nginx系列(四)--工作原理
上篇文章介绍了Nginx框架的设计之管理进程以及多个工作进程的设计.master进程用来管理通过fork子进程与子进程通信.子进程通过处理进程信号接到master的通信去处理请求. Nginx工作原理 ...
- hdoj 4548 美素数 【打表】
另类打表:将从1到n的满足美素数条件的数目赋值给prime[n],这样最后仅仅须要用prime[L]减去prime[R-1]就可以: 美素数 Time Limit: 3000/1000 MS (Jav ...
- SSH公钥认证
一.实验的目的 了解密钥对的创建和使用,掌握免password远程登录和远程操作 二.实验环境 本地主机 rh1: 192.168.233.3/24 远程主机 rh2: 192.168.233.4/2 ...