layui后台框架,将左侧功能栏目 集中到一个页面,通过上面的tab切换 在iframe加载对应页面

 实现上面的 功能效果。

1 html代码

<form class="layui-form layui-form-pane" action=""><div class="layui-tab" lay-filter="demo"><ul class="layui-tab-title"><li id="a0" class="layui-this">栏目1</li><li>栏目2</li><li>栏目3</li></ul><div class="layui-tab-content"><!-- 栏目1 --><div class="layui-tab-item layui-show"><iframe src="/pages1.html" frameborder="0" width="100%"height="100%"></iframe></div><!-- 栏目2 --><div class="layui-tab-item"><iframe src="/pages2.html" frameborder="0" width="100%"height="100%"></iframe></div><!-- 栏目3 --><div class="layui-tab-item"><iframe src="/pages3.html" frameborder="0" width="100%"height="100%"></iframe></div></div></form>

2 样式调整,对应的ifrome高度问题

<style>.layui-tab-item {height: 800px;}</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/603851.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vivado ILA 交叉触发

ILA 交叉触发 ILA 交叉触发功能支持在 ILA 核之间以及在 ILA 核与处理器 &#xff08; 如 Zynq -7000 SoC &#xff09; 之间进行交叉触发。如需在位于不 同时钟域中的 2 个 ILA 核之间执行触发 &#xff0c; 或者要在处理器与 ILA 核之间执行硬件 / 软件交叉触发 &a…

Linux内核自带的LED驱动实验:Led驱动功能测试

一. 简介 前面几篇文章学习了如何使用Linux内核自带的Led驱动。一篇文章通过对驱动分析&#xff0c;了解了驱动与设备匹配的关键点。 一篇文章学习了如何配置使能Linux内核自带的Led驱动&#xff0c;第二篇文章学习创建Led设备树节点&#xff08;针对使用Linux内核自带的Led…

VBA技术资料MF140:在PowerPoint中移动幻灯片位置

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

JavaSE:图书管理系统

目录 一、前言 二、内容需求 三、类的设计 &#xff08;一&#xff09;图书类 1.Book 类 2.BookList 类 &#xff08;二&#xff09;操作类 1.添加图书AddOperation类 2.借阅图书BorrowOperation类 3.删除图书DelOperation类 4.显示图书ShowOperation类 5.退出系统Ex…

uniapp 表单使用Uview校验 包括城市选择器

<view><!-- 注意&#xff0c;如果需要兼容微信小程序&#xff0c;最好通过setRules方法设置rules规则 --><u--form labelPosition"left" :model"model1" :rules"rules" ref"uForm" labelWidth"174"><u…

性能分析-数据库与磁盘知识

数据库 数据库&#xff0c;其实是数据库管理系统dbms。 数据库管理系统&#xff0c; 常见&#xff1a; 关系型数据库&#xff1a; mysql、pg、 库的表&#xff0c;表与表之间有关联关系&#xff1b; 表二维表统一标准的SQL&#xff08;不局限于CRUD&#xff09;非关系型数据…

动态路由-基于vue-admin-template

基于 vue-admin-template的动态路由 1. 拆分静态路由与动态路由 静态路由----所有人都可以访问—首页/登录/404 动态路由–有权限的人才可以访问—组织/角色/员工/权限 2. 根据用户权限添加动态路由 获取对应的权限标识(vuex中actions中把用户资料通过return 进行返回&…

ExpressLRS开源代码之功能性能测试

ExpressLRS开源代码之功能&性能测试 1. 源由2. 规格2.1 功能2.2 性能 3. 概念3.1 产品组成3.2 性能分解3.3 专业归口 4. 测试4.1 实验室测试4.2 简易实验方法4.3 外场测试4.4 终极验证 5. 调优5.1 RF调优5.2 模块调优5.3 产品调优 6. 总结 1. 源由 最近&#xff0c;在ELRS…

文献速递:深度学习胰腺癌诊断--基于螺旋变换的胰腺癌分割模型驱动深度学习方法

Title 题目 Model-Driven Deep Learning Method forPancreatic Cancer Segmentation Basedon Spiral-Transformation 基于螺旋变换的胰腺癌分割模型驱动深度学习方法 01 文献速递介绍 胰腺癌是最致命的恶性肿瘤之一&#xff0c;其特点是诊断延迟、治疗困难和高死亡率。患者…

华为USG6000v

1、安全区域 一个及或多个接口的集合 默认的安全区域 Trust --- 优先级85&#xff0c;一般连接内网 Untrust --- 优先级5&#xff0c; 一般连接外网 Dmz --- 优先级50&#xff0c;一般连接服务器、 Local --- 优先级100&#xff0c;防火墙接口所在区的区域 2…

鲸鱼优化算法(Whale Optimization Algorithm)

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 算法背景 鲸鱼优化算法&#xff08;Whale Optimization Algorithm, WOA&#xff09;是一种模拟鲸鱼捕食行为的优化算法。想象一下&#xff0c;你…

Linux初学(十七)防火墙

一、防火墙简介 1.1 防火墙的类别 安全产品 杀毒&#xff1a; 针对病毒&#xff0c;特征篡改系统中的文件杀毒软件针对处理病毒程序防火墙&#xff1a; 针对木马&#xff0c;特征系统窃取防火墙针对处理木马 防火墙分为两种 硬件防火墙软件防火墙 硬件防火墙 各个网络安全…