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.mzph.cn/news/801542.shtml

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

相关文章

使用 proxySQL 来代理 Mysql

我有若干台云主机&#xff0c; 但是只有1个台vm 具有外部ip 而在另1台vm上我安装了1个mysql instance, 正常来讲&#xff0c; 我在家里的电脑是无法连接上这个mysql 尝试过用nginx 代理&#xff0c; 但是nginx只能代理http协议的&#xff0c; mysql 3306 并不是http协议 解决…

Leetcode 6. Z 字形变换

将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时&#xff0c;排列如下&#xff1a; P A H N A P L S I I G Y I R 之后&#xff0c;你的输出需要从左往右逐行读取&#xff0…

BM96 主持人调度(二)(贪心算法)

一开始写的时候忘了给start、end数组赋值了 import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** 计算成功举办活动需要多少名主持人* param n int整型 有n个活动* param start…

list介绍及使用

文章目录 list的介绍及使用1. list的介绍2. list的使用2.1 list的构造2.2 list iterator的使用2.3 list capacity2.4 list element access2.5 list modifiers2.6 list的迭代器失效 list的介绍及使用 1. list的介绍 list文档介绍 list是可以在 常数范围内 在任意位置进行插入和…

Ubuntu22.04修改默认窗口系统为X11

Ubuntu22.04安装默认窗口系统为Wayland&#xff08;通过设置->关于可以看到&#xff09;。 一、用Ubuntu on Xorg会话登录 用户登录时&#xff0c;点“未列出”&#xff0c;输入用户名后&#xff0c;在登录界面底部的齿轮图标中&#xff0c;选择 "Ubuntu on Xorg&quo…

Druid报错:Error attempting to get column ‘DISABLE_DATE‘ from result set.

背景 Mybatis-Plus 3.2.0 Druid 1.1.20 Oracle 11g 版本在处理 LocalDateTime 时报错&#xff1a; org.springframework.dao.InvalidDataAccessApiUsageException: Error attempting to get column ‘DISABLE_DATE’ from result set. Cause: java.sql.SQLFeatureNotSupport…

备考ICA----Istio实验18---单集群中部署多个Istio控制面

备考ICA----Istio实验18—单集群中部署多个Istio控制面 单个 Kubernetes 控制面以及多个 Istio 控制面和多个网格。通过 Kubernetes 命名空间和 RBAC 实现软多租户业务隔离。 1. 环境准备 1.1 创建2个命名空间 kubectl create ns usergroup-1 kubectl label ns usergroup-…

STC89C52学习笔记(六)

STC89C52学习笔记&#xff08;六&#xff09; 综述&#xff1a;本文讲述了51单片机的定时器和中断&#xff0c;还讲述了如何初始化定时器、编写中断服务函数和完成定时器控制LED闪烁。 一、定时器 1. 作用 ①用于计时 ②替代长时间的Delay。因为在Delay下&#xff0c;单片…

反转链表 II(leetcode)

题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 分享两道解题思路&#xff1a; 第一个&#xff1a; 将left~right之间的节点翻转&#xff0c;首先left前的节点的next置为空&#xff0c;right的指针置为空&#xff0c; 然后拼接 p1指的是left前面的一个 p1-…

使用新版FLIR (FLIR_ADAS_v2) 数据集创建yolo格式数据集(目标检测)

FLIR在2022.1.19发布了新版的FLIR_ADAS_v2&#xff0c;有着更多的类别和数量更丰富的图像。数据集同步注释热图像和无注释RGB图像供参考。本文章主要介绍如何使用FLIR_ADAS_v2中的rgb图像和thermal图像来制作yolo格式数据集。 1.官方数据集下载&#xff1a;FLIR_ADAS_v2数据集…

win11 连接海康摄像头 ONVif协议

目录 Win 11 通过脚本打开自带的IE浏览器访问海康摄像头 海康摄像头设置支持onvif协议 安装onvif协议 onvif协议示例代码 Win 11 通过脚本打开自带的IE浏览器访问海康摄像头 第一步、桌面右键新建一个 txt 的文档 第二步、打开文档并且复制粘贴下面代码 CreateObject(&…

OpenCV单通道图像按像素成倍比例放大(无高斯平滑处理)

OpenCV中的resize函数可以对图像做任意比例的放大(/缩小)处理&#xff0c;该处理过程会对图像做高斯模糊化以保证图像在进行放大&#xff08;/缩小&#xff09;后尽可能保留源图像所展现的具体内容&#xff08;消除固定频率插值/采样带来的香农采样信息损失&#xff09;&#x…

【深度学习】环境搭建ubuntu22.04

清华官网的conda源 https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ 安装torch conda install pytorch torchvision torchaudio pytorch-cuda12.1 -c pytorch -c nvidia 2.2.2 conda install 指引看这里&#xff1a; ref:https://docs.nvidia.com/cuda/cuda-installatio…

Leetcode面试经典150_Q14最长公共前缀

题目&#xff1a; 编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀&#xff0c;返回空字符串 ""。 思路A&#xff1a;横向/纵向扫描 Python&#xff1a; class Solution:def longestCommonPrefix(self, strs: List[str]) -> str:s "…

微软edge浏览器上网、下载速度慢,如何解决??

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

【Spring】一问详解什么是Spring IoC和DI

目录 一、IoC & DI入门1.1、Spring1.1.1、什么是容器1.1.2、什么是IoC 1.2、IoC介绍1.2.1、传统程序开发1.2.2、问题分析1.2.3、问题解决1.2.4、 IoC优势 1.3、Bean的作用域1.4、DI介绍 二、IoC详解2.1、Bean的存储2.1.1、类注解的使用2.1.2、获取bean对象的其他方式2.1.3、…

【Linux 命令】内核、驱动调试手段总结

文章目录 1. printk2. strace3. Itrace4. ptrace5. ftrace6. 动态打印7. perf8. devmem9. demsg参考&#xff1a; 1. printk **printk()**是 Linux 内核中最广为人知的函数之一。它是我们打印消息的标准工具&#xff0c;通常也是追踪和调试的最基本方法。 虽然 printk() 是基…

element问题总结之el-table使用fixed中 header换行后固定行错位问题/固定列下陷问题

固定列下陷问题 效果图问题描述解决方案1、为table添加ref2、调用节点重新自适应方法doLayout3、在操作表头的时候触发的函数header-dragend绑定doLayout方法4、成功解决 效果图 问题描述 在使用el-table的fixed中&#xff0c;发现如果header拖拽文本折行的时候会出现下陷 解…

【大数据】大数据概论与Hadoop

目录 1.大数据概述 1.1.大数据的概念 1.2.大数据的应用场景 1.3.大数据的关键技术 1.4.大数据的计算模式 1.5.大数据和云计算的关系 1.6.物联网 2.Hadoop 2.1.核心架构 2.2.版本演进 2.3.生态圈的全量结构 1.大数据概述 1.1.大数据的概念 大数据即字面意思&#x…

SRIO学习(3)使用SRIO IP核进行设计

文章目录 前言一、设计框图二、模块介绍三、上板验证 前言 本文将通过使用SRIO IP核实现数据通信&#xff0c;重点在于打通数据链路&#xff0c;具体的协议内容设计并非重点&#xff0c;打通了链路大家自己根据设计需求来即可。 一、设计框图 看了前面高速接口的一些设计&am…