HUI_admin框架，右键菜单增加关闭其他页签功能

最新推荐文章于 2024-04-03 09:55:38 发布
最新推荐文章于 2024-04-03 09:55:38 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： jsp js Hui_admin Hui 文章标签： Hui_admin 关闭页签 关闭其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Henry__jia/article/details/89885684
版权
jsp 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏
Hui_admin
1 篇文章 0 订阅
订阅专栏

HUI_admin框架，右键菜单增加关闭其他页签功能

最近做了一套管理系统，页面用的是HUI_admin框架，打开多个页面后，右键菜单如下，关闭其他是我新加的，原框架里没有，这里就简单说一下，关闭其他的功能实现过程。
在这里插入图片描述
右键菜单的选项在main.jsp里，这里我们增加一个关闭其他
在这里插入图片描述
，当页面打开多个页签时，页面页签源码如下：

这里打开了三个页签，激活状态的页签class属性为active,其他页签class为空
在这里插入图片描述
我们关闭其他页签只需要获取一组相同标签内没有class的标签就可以了，然后出发他的关闭事件
js如下： 在H-ui.admin.js里
在这里插入图片描述

Henry__jia
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H-ui.admin_v2.3.1
03-06
html5 后台管理系统H-ui.admin_v2.3.1版本。 根目录 │ _blank.html 空白页(每次我们都拿空白页去创建，这样比较干净！) │ _footer.html 页脚公共代码片段 │ _header.html 头部公共代码片段 │ _meta.html meta公共代码片段 │ robots.txt 搜索引擎爬虫配置文件 │ login.html 管理员登陆 │ index.html 首页(主框架) │ welcome.html 我的桌面（默认永远打开的页面） │ member-开头的 用户相关 │ artice-开头的 资讯相关 │ picture-开头的 图片相关 │ product-开头的 产品相关 │ page-开头的 页面相关 │ system-开头的 系统相关 │ admin-开头的 管理员相关 │ charts-开头的 统计相关 …… ├─css │ H-ui.reset.css H-ui.reset css │ H-ui.css h-ui CSS │ H-ui.min.css h-ui CSS 压缩版 │ H-ui.login.css H-ui.admin后台登录样式 │ H-ui.admin.css H-ui.admin样式 │ style.css 写你自己的样式 │ ├─images UI相关的图片素材 │ ├─js │ H-ui.js H-ui核心脚本 │ H-ui.admin.js 本站相关的js ├─lib │ jquery jQuery类库（v1.9.1） │ bootstrapSwitch 开关控件 │ Hui-iconfont_v1.0 阿里图标字体库（H-ui定制） │ font-awesome 字体库文件 │ icheck 单选框、复选框控件 │ laypage laypage 翻页插件 │ layer layer弹出层插件 │ laytpl JavaScript模板引擎 │ My97DatePicker 日期插件 │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ dataTables 表格排序，检索插件 │ WebUploader 百度文件上传组件 │ lightbox2 图片预览组件 │ │ html5.js html5插件，让低版本IE支持html5元素 │ DD_belatedPNG_0.0.8a-min.js 解决IE6png透明 │ swfobject.js Flash插件 │ expressInstall.swf 检查flash插件 │ unslider.min.js Unslider图片滚动效果插件 │ stickUp.min.js 让页面元素"固定"位置 │ respond.min.js 让IE兼容media │ Echo.js 图片延迟加载插件 │ colpick.js 颜色插件 │ handlebars.js js模版引擎 │ waterfall.min.js 瀑布流插件 └─temp 测试数据、图片
Hui-Admin-Pro:Hui-Admin-Pro基于VueCli3.0搭配iView UI形成一套企业级中台前端解决方案
03-21
Hui-Admin专业版 专业全功能版 简述：如果你喜欢iviewUI风格，或许Hui-Admin-Pro是你的另外一个选择。 Hui-Admin-Pro是基于增加更多复杂功能 说明：本人写这个框架是有价值的学习态度，无意冲突商业大佬利益。 兼容说明：初测兼容ie11 360极速模式谷歌火狐其他未测；界面适配笔记本和日常PC；不适合平板和手机。 主要技术： iview4.0 + vuecli3.0 vue-router路由跳转 (层级嵌套适配、跳转前的拦截、跳转后页面自动滚到顶部) vuex管理 (导航高亮、多分页标签切换、根据用户动态菜单路由控制等) less flex弹性布局 没有使用eslint 代码风格插件 更新日志： 1.x 在2019年已经完成 具体看提交记录 2.1.0 2020-05-16 - 更换登录接口为在线mock - 重构了动态路
推荐开源项目：Hui-Admin-Pro - 高效易用的企业级后台管理系统
最新发布
gitblog_00059的博客
04-03 481
推荐开源项目：Hui-Admin-Pro - 高效易用的企业级后台管理系统 项目地址:https://gitcode.com/zengxiaohui2019/Hui-Admin-Pro Hui-Admin-Pro 是一个基于 Vue3 和 Element Plus 的强大后台管理框架，专为构建高效、现代化的企业级Web应用而设计。它的核心目标是简化开发流程，提高开发效率，并提供一套完整的UI模板和...
JFinal Web开发学习(九)后台添加前台显示博客
珍惜时间
12-04 2488
代码： https://code.csdn.net/u012995856/jfinaltest/tree/master 效果： 发博客： 显示博客： 后台：使用hui-admin，文章编辑器是百度开源的ueditor 前台：使用layui前端框架 1.写控制器BlogController controller包中package cn.pangpython.controll
python全栈开发公司案例1000例之server端管理员权限的开发
05-24
管理员权限功能开发的整体梳理 创建项目 创建视图层，views层和model层 创建管理员登录模块，提交数据以及数据的验证一系列的功能 创建后端的菜单模块：增删改查的功能 菜单模块的添加视图层以及数据的传递以及保存数据到数据库的整个流程 把数据读取出来渲染到视图层的整个流程 介绍hui-admin UI框架的使用以及布局添加菜单模块的视图层    创建角色权限模块的视图层创建以及数据层的对接     前端js对角色授权按钮的处理     前端js对对每一个角色的复选框的数据绑定以及选中功能     通过多表连接读取数据库中后端分类的数据以及数据进行处理     传递菜单分类数据到视图层，书写js方法进行数据渲染功能     如何把选中的菜单项传递到后端进行数据处理     后端如何接收到前端传递来的菜单分类数据如何再写入到数据库中     Django框架的models如何批量插入数据到数据库中    添加管理员模块以及指定当前管理员的角色    按照不同的管理员进行登录显示不同的角色所管理的菜单分类数据     多表操作管理员表角色表菜单表获取当前管理员管理的菜单项     得到对应的菜单项数据传递到前端进行渲染 本课程以实际案例开发为主，通过案例来巩固基础知识。
Hui-admin v2.2图标引入
zuo_zuo_blog的博客
07-17 976
阿里图标iconfont：https://www.iconfont.cn/home/index 字体图标的使用方法： 第一步：下载（如果下载过H-ui框架和H-ui.admin的，请跳过第一步，无须重复下载） http://www.h-ui.net/Hui-3.7-Hui-iconfont.shtml 第二步：引入 为了方便资源调用，尽量保持现有字库的目录结构，不要随意拆开部署，防...
JavaWeb(12) Hui-admin前端框架中遇到的坑-总结
郑清
10-27 4526
今天使用hui-admin框架的时候，发现html页面转jsp页面的 ${pageContext.request.contextPath } 不能得到js路径，原因是它里面的部分注释在jsp页面中存在问题，下面就是部分问题，所以需要修改才能使最后的页面有指定的效果！！ 注意:改成jsp页面后 它里面的坑还有很多，比如我之后又遇到代码中间无故出现一些符号没有注释掉，这些问题在html页面中不会出现...
HUI Admin 直接可以用的后台管理框架
10-11
《HUI Admin：高效便捷的后台管理框架》 在当今的互联网行业中，后台管理系统作为企业运营的核心工具之一，其易用性与功能性至关重要。HUI Admin 就是这样一款可以直接使用的后台管理框架，专为提升开发效率和用户...
hui-iv72.zip_HUI_关联 遗传
07-14
能量谱分析计算,用MATLAB编写的遗传算法路径规划，包括邓氏关联度、绝对关联度、斜率关联度、改进绝对关联度。
Hui-Admin-Pro
04-16
Hui-Admin Pro 专业全功能版 简述：如果你喜欢iviewUI风格,或许Hui-Admin-Pro是你的另外一个选择。 Hui-Admin-Pro是基于 增加更多复杂功能 说明：本人写这个框架是抱着学习态度，无意冲突商业大佬利益。 兼容说明：初测兼容ie11 360极速模式 谷歌 火狐 其他未测；界面适配笔记本和日常PC；不适配平板和手机。 主要技术： iview4.0 + vuecli3.0 vue-router路由跳转 (层级嵌套适配、跳转前的拦截、跳转后页面自动滚到顶部) vuex管理 (导航高亮、多分页标签切换、根据用户动态菜单路由控制等) less flex弹性布局 没有使用eslint 代码风格插件 更新日志： 1.x 在2019年已经完成 具体看提交记录 2.1.0 2020-05-16 - 更换登录接口为在线mock - 重构了动
Hui-Admin-Pro.zip
04-22
基于iview的后台前端模板， Hui-Admin Pro专业版 是基于基础版 增加更多复杂功能 2. 主要技术： iview4.0 + vuecli3.0 vue-router路由跳转 (层级嵌套适配、跳转前的拦截、跳转后页面自动滚到顶部) vuex管理 (导航高亮、多分页标签切换、浏览器刷新路由状态控制等)
thinkphp5集成HUI后台管理系统
08-05
tpadmin 是一个基于 ThinkPHP5.0 正式版和 Hui.admin v2.5 的管理后台，简化管理后台的开发流程，简化代码的编写，提高代码复用率，同时集成完整的权限管理和其他管理后台中常用的功能
H-ui.admin.zip hui版管理系统
01-11
H-ui.admin.zip hui版管理系统 页面美观，可配合后端进行大型开发
Hui-Admin-Pro专业版
06-09
Hui-Admin Pro专业全功能版，付费才能得到的版本
hui ui 手机端ui框架
03-08
相比其他框架，尤其是与广为人知的WEUI相比，HUI UI在功能上更加强大，提供了更多定制化的选项，使得开发者能够更灵活地构建用户界面。 首先，HUI UI框架的核心特性在于其详尽的示例（demos）。这些演示涵盖了各种...
hui移动端前端框架
01-25
《HUI移动端前端框架详解与应用》 在数字化时代的洪流中，移动端应用开发日益重要，而优秀的前端框架则是构建高效、响应迅速的移动应用的关键。HUI移动端前端框架，作为一个专门为移动端设计的前端解决方案，它以其...
HuiAdmin出现网页无法正常运作 500错误
YEYEYEYEFAN
02-01 531
1.runtime目录777权限是否给了。 2.服务器端php版本是否与本地开发时的版本一致。
Hui_admin_tab tabChange
06-06
`Hui_admin_tab` 是 H-ui.admin 模板提供的一个 JavaScript 对象，用于操作页面的 tab 标签页。其中 `tabChange` 事件是在切换 tab 标签页时触发的，可以使用该事件来执行一些自定义的代码。以下是一个示例： ```javascript layui.use(['element', 'layer'], function(){ var element = layui.element; element.on('tab(Hui-tab)', function(data){ console.log(data.elem); // 当前的 tab 对象 console.log(data.index); // 当前 tab 索引 console.log(data.title); // 当前 tab 的标题 console.log(data.content); // 当前 tab 的内容 // TODO: 在这里执行自定义代码 }); }); ``` 在上述代码中，我们使用了 `layui.element` 模块来获取 H-ui.admin 中的 `Hui-tab` 元素，然后在 `tabChange` 事件上添加了一个事件监听器。当 tab 切换时，该事件监听器会触发并执行相应的代码，包括输出当前的 tab 对象、索引、标题和内容，并可以在其中添加自定义代码。 需要注意的是，上述代码中的 `Hui-tab` 是 H-ui.admin 中已经初始化的 tab 元素的 ID。如果页面中的 tab 元素的 ID 不是 `Hui-tab`，则需要将 `tab(Hui-tab)` 替换为实际的 ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值