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

news2024/11/25 16:33:43

 实现上面的 功能效果。

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.coloradmin.cn/o/1580404.html

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

相关文章

常见的mq产品和优点

常见的mq产品和优点 一、什么是mq? MQ全称 Message Queue&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。多用于分布式系统之间进行通信&#xff0c;解耦。 二、常见的mq产品 RabbitMQ、RocketMQ、ActiveMQ、Kafka、ZeroMQ、MetaMq …

基于51单片机轮胎胎压监测系统—数码管显示

基于51单片机轮胎胎压监测系统 &#xff08;仿真&#xff0b;程序&#xff0b;设计报告&#xff09; 功能介绍 具体功能&#xff1a; 1.MPX4115压力传感器胎压检测&#xff1b; 2.ADC0832进行模数转换后&#xff0c;51单片机处理控制&#xff1b; 3.数码管显示胎压&#xff…

谷歌留痕霸屏要怎么做?

谷歌留痕霸屏&#xff0c;就是让你的网站或者页面在谷歌搜索结果里尽可能多地出现&#xff0c;就像是在你的潜在客户眼前留下深刻印象一样&#xff0c;你要做的就是在一些高权重平台发布有价值的信息&#xff0c;同时巧妙地留下你的品牌名、产品名或者任何你想要推广的关键词&a…

Selenium+Chrome Driver 爬取搜狐页面信息

进行selenium包和chromedriver驱动的安装 安装selenium包 在命令行或者anaconda prompt 中输入 pip install Selenium 安装 chromedriver 先查看chrome浏览器的版本 这里是 123.0.6312.106 版 然后在http://npm.taobao.org/mirrors/chromedriver/或者https://googlechrom…

位图/矢量图/GIF/PNG/JPEG/WEBP一网打尽

❝ 想把一件事做好&#xff0c;那就先把眼前的小事攻克 ❞ 大家好&#xff0c;我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。 前言 最近&#xff0c;在做项目资源打包优化。如果大家做过类似的工作&#xff0c;在操作过程中&#xff0c;想必有一个…

实战:gcc-11.4.0编译wxWidgets-2.8.12的xrc演示例程

由于我上次编译安装的wxWidgets-2.8.12的abi是1009的&#xff0c;现在编译xrc演示程序也要使用09的abi才能正常运行。 到sourceforge去下载wxGTK-2.8.12&#xff0c;然后解压。 上述的文件夹中有msvc的make, 有watcom的makefile, 还有 unx 的makefile, 在mint-21.3上就用unx这…

配置VM开机自启动

1. 在此电脑-右键选择“管理”-服务和应用程序-服务中找到VMware Workstation Server服务&#xff08;新版名称也可能是VMware自启动服务&#xff0c;自己找一下&#xff0c;服务属性里有描述信息的&#xff09;&#xff0c;将其启用并选择开机自动启动 新版参考官方文档&…

抖音变现项目有哪些?来这几个资源网站看看吧

做短视频就像是在做一道菜&#xff0c;你得有那么几个秘密武器&#xff0c;才能让你的作品从众多视频中脱颖而出。我这个视频剪辑界的“烹饪大师”&#xff0c;今天就来给大家分享一下我的厨房秘籍——那些让我视频大放异彩的素材网站。九才素材网&#xff1a; 说起九才素材网…

吴恩达深度学习笔记:深层神经网络(Deep Neural Networks)4.1-4.4

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第四周&#xff1a;深层神经网络(Deep Neural Networks)4.1 深层神经网络&#xff08;Deep L-layer neural network&#xff09;4.2 前向传播和反向传播&#xff08;Forward and backward pro…

3dmax渲染十几个小时怎么办?3dmax怎么多机渲染

当使用3ds Max进行渲染作业时&#xff0c;如果发现单张图像的渲染时间长达十数小时&#xff0c;这可能是由于计算机硬件配置较低或渲染场景过于复杂所致。为了缩短渲染时间并提高效率&#xff0c;我们可以考虑采用多台计算机进行协同渲染。下面&#xff0c;让我们一起探讨如何通…

Webots常用的执行器(Python版)

文章目录 1. RotationalMotor2. LinearMotor3. Brake4. Propeller5. Pen6. LED 1. RotationalMotor # -*- coding: utf-8 -*- """motor_controller controller."""from controller import Robot# 实例化机器人 robot Robot()# 获取基本仿真步长…

【编译原理】Antlr 入门使用

前面文章我们学习了编译器前端的词法和语法分析工具&#xff0c;本篇我们来看看如何借助 Antlr 工具&#xff0c;快速生成词法和语法分析代码。 一、安装 mac 环境&#xff1a; 1&#xff09;安装 brew install antlr2&#xff09;配置 classpath &#xff08;把 Antlr 的 J…

MySQL -- 07_最流行的查询需求分析(一些分组排序查询、开窗函数 dense_rank、distinct 去重函数 等~)

目录 最流行的查询需求分析07演示数据准备的SQL需求演示36、查询每一门课程成绩都在70分以上的姓名、课程名称和分数group by min() in() 函数 37、查询不及格的课程及学生普通表连接查询 38、查询课程编号为01语文且课程成绩在80分以上的学生的学号和姓名普通表连接查询 39、…

使用axios进行前后端数据传输

最近在和朋友合作写一个新的项目&#xff0c;前后端进行了分离&#xff0c;既然是分离的&#xff0c;肯定需要交互&#xff0c;今天这篇文章详细介绍一下数据交互的一种常见方式&#xff1a;使用axios,希望对大家有所帮助。 前端&#xff1a;以LoginPage.vue登录页面为例&…

扬帆出海扩规模,仍是比亚迪未来的发展关键?

又到了新能源车企公布阶段性成果的时期。 日前&#xff0c;乘联会预估2024年3月全国新能源乘用车厂商批发销量82万辆&#xff0c;同比增长33%&#xff0c;环比增长84%。其中&#xff0c;比亚迪继续领跑&#xff0c;3月销量超30万辆&#xff0c;环比增长147.8%&#xff0c;而这…

OpenHarmony实战:瑞芯微RK3566移植案例(上)

本文章是基于瑞芯微RK3566芯片的khdvk_3566b开发板&#xff0c;进行标准系统相关功能的移植&#xff0c;主要包括产品配置添加&#xff0c;内核启动、升级&#xff0c;音频ADM化&#xff0c;Camera&#xff0c;TP&#xff0c;LCD&#xff0c;WIFI&#xff0c;BT&#xff0c;vib…

中科院发布大模型想象增强法IAG,无需外部资源,想想就能变强

在人工智能领域&#xff0c;尤其是自然语言处理&#xff08;NLP&#xff09;的子领域——问答系统&#xff08;QA&#xff09;中&#xff0c;知识的获取和利用一直是推动技术进步的核心问题。近年来&#xff0c;大语言模型&#xff08;LLMs&#xff09;在各种任务中展现出了惊人…

【C语言】扫雷【附源码】

欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 一、扫雷游戏规则 尽快找到雷区中的所有不是地雷的格子,而不许踩到地雷。点开的数字是几&#xff0c;则说明该数字旁边的8个位置中有几个雷&#xff0c;如果挖开的是地雷&#xff0c;则会输掉游戏。 二、代码思路&…

Laravel 项目如何运行

如有一个 Laravel 项目&#xff0c;在配置好 PHP 版本和运行环境后&#xff0c;可以直接在项目下直接运行&#xff1a; php artisan serve 来启动你的项目。 通过浏览器查看 当项目运行后&#xff0c;默认的启动端口为 8000&#xff0c;可以通过浏览器来进行查看运行的 Larav…

C++性能测试工具

使用示例main.cpp // g-13 -O3 -stdc17 main.cpp profile.cpp #include <iostream> #include <chrono> #include <stdint.h> #include <mutex> // std::mutex#include "profile.h" #include "profile_rdtsc.h"std::mut…