前端——Layui的导航栏与tab页联动
一、body
<!-- 导航栏 --><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><ul id="nav" class="layui-nav layui-nav-tree" lay-filter="stock"><li class="layui-nav-item layui-this"><a href="#wholeAnalysis" lay-id="wholeAnalysis">整体分析</a></li><li class="layui-nav-item"><a href="#bkAnalysis" lay-id="bkAnalysis">aaaa</a></li><li class="layui-nav-item"><a href="#gpAnalysis" lay-id="gpAnalysis">bbbb</a></li><li class="layui-nav-item"><a href="#bkChance" lay-id="bkChance">cccc</a></li><li class="layui-nav-item"><a href="#gpChance" lay-id="gpChance">dddd</a></li></ul></div></div><div class="layui-body"><!-- tab页 --><div id="tab" class="layui-tab" lay-filter="stock" lay-allowClose="true"><ul class="layui-tab-title"><li class="layui-this" lay-id="wholeAnalysis">整体分析</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show"><iframe id="wholeAnalysis" src="wholeAnalysis" frameborder="0" height="100%" width="100%"></iframe></div></div></div></div>
二、JS
// 导航栏点击element.on('nav(stock)', function (data) {const layId = this.getAttribute('lay-id')if (layId == null) {return 0;} else {//判断是否存在tablet exist = $("li[lay-id='" + layId + "']").length; if (exist == 0) {element.tabAdd('stock', {title: this.innerHTML,content: "<iframe id='" + layId + "' frameborder='0' src='" + layId + "' scrolling='auto' height='100%' width='100%'></iframe>",id: layId});}setIframeHeight(document.getElementById(layId));element.tabChange('stock', layId);}});// tab页点击element.on('tab(stock)', function () {let Len = $("#nav li a").length;let targetIndex;for (let i = 0; i < Len; i++) {if ($(this).context.textContent == $("#nav li a")[i].outerText) {//tab内容和垂直导航相等时,记录下序号targetIndex = i;}}// 更新layui-this样式类$("#nav").find('.layui-this').removeClass('layui-this');$("#nav li a").eq(targetIndex).parentsUntil("#nav").addClass("layui-this");location.hash = this.getAttribute('lay-id');});
相关文章:
前端——Layui的导航栏与tab页联动
一、body <!-- 导航栏 --><div class"layui-side layui-bg-black"><div class"layui-side-scroll"><ul id"nav" class"layui-nav layui-nav-tree" lay-filter"stock"><li class"layui-n…...
一致性哈希算法
普通取模算法 假设我们有三台缓存服务器,用于缓存图片,我们为这三台缓存服务器编号为 0号、1号、2号,现在有3万张图片需要缓存,我们希望这些图片被均匀的缓存到这3台服务器上,以便它们能够分摊缓存的压力。也就是说&a…...
深度学习基础之参数量(3)
一般的CNN网络的参数量估计代码 class ResidualBlock(nn.Module):def __init__(self, in_planes, planes, norm_fngroup, stride1):super(ResidualBlock, self).__init__()print(in_planes, planes, norm_fn, stride)self.conv1 nn.Conv2d(in_planes, planes, kernel_size3, …...
红队专题-从零开始VC++远程控制软件RAT-C/S-[2]界面编写及上线
红队专题 招募六边形战士队员1.课前回顾unicode编码 字符串 2.界面编程(下)对话框重载消息函数更改对话框同步更改 3.服务端上线,下线,以及客户端的资源销毁(上)添加socket 变量添加 socket 消息填补config信息创建线程函数 并运行添加Addhost添加 getIt…...
磁盘满了对日志打印(Logback)的影响
背景 我们生产环境有一个服务半夜报警:磁盘剩余空间不足10%,请及时处理。排查后发现是新上线的一个功能,日志打太多导致的,解决方法有很多,就不赘述了。领导担心报警不及时、或者报警遗漏,担心磁盘满了对线…...
【算法与数据结构】--算法基础--数据结构概述
一、什么是数据结构 数据结构是一种组织和存储数据的方式,它定义了数据之间的关系、操作和存储方式,以便有效地访问和修改数据。数据结构是计算机科学中的一个重要概念,它为处理和管理数据提供了基本框架。数据结构通常包括以下几个重要方面…...
QECon大会亮相产品,全栈测试平台推荐:RunnerGo
最近在gitee上看见一款获得GVP(最有价值开源项目)的测试平台RunnerGo,看他们官网介绍包含了接口测试、性能测试、自动化测试。知道他们有saas版可以试用,果断使用了一下,对其中场景管理和性能测试印象深刻,…...
前端小案例-图片存放在远端服务器
前端小案例-图片存放在远端服务器 项目背景: 一个智能产业园的小程序由于可以控制很多种设备,可能有灯、空调、窗帘等智能设备。 现在面临以下问题: 需要存放很多设备的图标。设备的图标可能会进行修改。 为了解决上面的问题,…...
【鼠标右键菜单添加用VSCode打开文件或文件夹】
鼠标右键菜单添加用VSCode打开文件或文件夹 演示效果如下: 右击文件 或右击文件夹 或在文件夹内空白处右击 方法一:重装软件 重装软件,安装时勾选如图所示方框(如果登录的有账号保存有配置信息可以选择重装软件,…...
【jvm--堆】
文章目录 1. 堆(Heap)的核心概述2. 图解对象分配过程2.1 Minor GC,MajorGC、Full GC2.1 堆空间分代思想2.3 内存分配策略2.4 TLAB(Thread Local Allocation Buffer)2.5 堆空间的参数设置2.6 逃逸分析2.7 逃逸分析&…...
【数据库——MySQL(实战项目1)】(1)图书借阅系统
目录 1. 简述2. 功能3. 数据库结构设计3.1 绘制 E-R 图3.2 创建数据库3.3 创建表3.4 插入表数据 1. 简述 经过前期的学习,我们已经掌握数据库基础操作,因此是时候来做一个实战项目了——图书借阅系统。对于图书借阅系统,相信大家不难想到至少…...
[GXYCTF 2019]Ping Ping Ping题目解析
本题考察的内容是rce绕过,本事过滤的东西不算多也算是比较好绕过 基础看到这种先ping一下试试看 输入127.0.0.1看看有啥东西 有回显说明可以接着往下做 借用RCE漏洞详解及绕过总结(全面)-CSDN博客这个大佬整理的rce绕过 ;A;B无论真假,A与B都执行&…...
HTTP协议的请求协议和响应协议的组成,HTTP常见的状态信息
HTTP协议 什么是协议 协议实际上是某些人或组织提前制定好的一套规范,大家只要都按照这个规范来就可以做到沟通无障碍 HTTP协议是W3C(万维网联盟组织)制定的一种超文本传输通信协议(发送消息的模板和数据的格式),除了传送字符串,还有声音、视频、图片等流媒体等超文本信息 …...
【LeetCode】剑指 Offer Ⅱ 第6章:栈(6道题) -- Java Version
题库链接:https://leetcode.cn/problem-list/e8X3pBZi/ 类型题目解决方案栈的应用剑指 Offer II 036. 后缀表达式模拟 栈 ⭐剑指 Offer II 037. 小行星碰撞分类讨论 栈 ⭐单调栈剑指 Offer II 038. 每日温度单调栈 ⭐剑指 Offer II 039. 直方图最大矩形面积单调栈…...
vue3的element-plus的el-dialog的样式修改无效问题
问题描述 想要修改element-plus的对话框el-dialog中的样式,发现在页面style的scoped属性下,使用:deep深入选择器进行修改是无效的。(vue2下深度选择器是有效的) //无效 :deep(.el-dialog){background-color: transparent; }解决…...
归纳所猜半结论推出完整结论:CF1592F1
https://www.luogu.com.cn/problem/CF1592F1 场上猜了个结论,感觉只会操作1。然后被样例1hack了。然后就猜如果 ( n , m ) (n,m) (n,m) 为1则翻转4操作,被#14hack了。然后就猜4操作只会进行一次,然后就不知道怎么做下去了。 上面猜的结论都…...
WPFdatagrid结合comboBox
在WPF的DataGrid中希望结合使用ComboBox下拉框,达到下拉选择绑定的效果,在实现的过程中,遇到了一些奇怪的问题,因此记录下来。 网上能够查询到的解决方案: 总共有三种ItemSource常见绑定实现方式: 1.ItemS…...
Markdown类图之继承、实现、关联、依赖、组合、聚合总结(十五)
简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…...
@MultipartConfig注解
前言: 在学习Javaweb的Servlet文件上传和下载的过程中,我们会遇到一个特殊的注解---MultipartConfig。 MultipartConfig的适用情况: 1.文件上传: 当您的应用程序需要接收用户上传的文件时,可以在相应的 Servlet 上使用 Multipart…...
Python并发编程简介
1、Python对并发编程的支持 多线程: threading, 利用CPU和IO可以同时执行的原理,让CPU不会干巴巴等待IO完成多进程: multiprocessing, 利用多核CPU的能力,真正的并行执行任务异步IO: asyncio,在单线程利用CPU和IO同时执行的原理,实现函数异步执行使用Lo…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
WEB3全栈开发——面试专业技能点P7前端与链上集成
一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染(SSR)与静态网站生成(SSG) 框架,由 Vercel 开发。它简化了构建生产级 React 应用的过程,并内置了很多特性: ✅ 文件系…...
二维FDTD算法仿真
二维FDTD算法仿真,并带完全匹配层,输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...
SQL注入篇-sqlmap的配置和使用
在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap,但是由于很多朋友看不了解命令行格式,所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习,链接:https://wwhc.lanzoue.com/ifJY32ybh6vc…...
GeoServer发布PostgreSQL图层后WFS查询无主键字段
在使用 GeoServer(版本 2.22.2) 发布 PostgreSQL(PostGIS)中的表为地图服务时,常常会遇到一个小问题: WFS 查询中,主键字段(如 id)莫名其妙地消失了! 即使你在…...
使用VMware克隆功能快速搭建集群
自己搭建的虚拟机,后续不管是学习java还是大数据,都需要集群,java需要分布式的微服务,大数据Hadoop的计算集群,如果从头开始搭建虚拟机会比较费时费力,这里分享一下如何使用克隆功能快速搭建一个集群 先把…...
