Layui快速入门之第六节 选项卡

news2025/10/31 23:47:54

目录

一：基本概念

选项卡依赖element模块

API

元素属性

基本使用：

二：选项卡风格

默认风格

简约风格 

​编辑

卡片风格

三：hash 状态匹配

四：tab相关操作

渲染 tab

添加 tab

删除 tab

切换 tab

自定义 tab

五：事件

tab 切换事件

tab 删除事件

一：基本概念

             选项卡组件 tab 是指可进行标签页切换的一段容器，常广泛应用于 Web 页面。由于为了向下兼容等诸多历史原因，在 2.x 版本中，tab 组件属于 element 模块的子集

使用：需要加载导航模块，也需要引入核心的js文件

选项卡依赖element模块

<script type="text/javascript">
    //选项卡依赖element模块
    layui.use('element',function(){
        var element = layui.element;
    });
</script>

API

API描述
var element = layui.element获得 element 模块。
element.render('tab', filter)渲染 tab 组件
element.tabAdd(filter, options)添加 tab 选项
element.tabDelete(filter, layid)删除 tab 选项
element.tabChange(filter, layid)切换 tab 选项
element.tab(options)绑定自定义 tab 元素

元素属性

属性描述
lay-allowclose是否开启删除图标。设置在 tab 容器 <ul class="layui-tab"> 上。
lay-idtab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 <li> 元素上

基本使用：

<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">标签1</li>
    <li lay-id="22">标签2</li>
    <li lay-id="33">标签3</li>
    <li lay-id="44">标签4</li>
    <li lay-id="55">标签5</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容-1</div>
    <div class="layui-tab-item">内容-2</div>
    <div class="layui-tab-item">内容-3</div>
    <div class="layui-tab-item">内容-4</div>
    <div class="layui-tab-item">内容-5</div>
  </div>
</div>
 
<div class="layui-btn-container">
  <button class="layui-btn" lay-on="tabAdd">新增 tab 项</button>
  <button class="layui-btn" lay-on="tabDelete">删除「标签4」</button>
  <button class="layui-btn" lay-on="tabChange">切换到「标签3」</button>
</div>
<script>
layui.use(function(){
  var element = layui.element;
  var util = layui.util;
  // 普通事件
  util.on('lay-on', {
    tabAdd: function(){
      // 新增一个 tab 项
      var label = (Math.random()*1000|0); // 标记 - 用于演示
      element.tabAdd('test-handle', {
        title: '新选项'+ label,
        content: '内容-'+ label,
        id: new Date().getTime() // 实际使用一般是规定好的id，这里以时间戳模拟下
      })
    },
    tabDelete: function(othis){
      // 删除指定 tab 项
      element.tabDelete('test-handle', '44'); // 删除：“商品管理”
      othis.addClass('layui-btn-disabled');
    },
    tabChange: function(){
      // 切换到指定 tab 项
      element.tabChange('test-handle', '33'); // 切换到：标签3
    }
  });
});
</script>

二：选项卡风格

tab 组件提供了三种 UI 风格，分别为：

风格className
默认风格class="layui-tab"
简约风格class="layui-tab layui-tab-brief"
卡片风格class="layui-tab layui-tab-card"

默认风格

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
    <li>标签4</li>
    <li>标签5</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容-1</div>
    <div class="layui-tab-item">内容-2</div>
    <div class="layui-tab-item">内容-3</div>
    <div class="layui-tab-item">内容-4</div>
    <div class="layui-tab-item">内容-5</div>
  </div>
</div>

简约风格 

<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
    <li>标签4</li>
    <li>标签5</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容-1</div>
    <div class="layui-tab-item">内容-2</div>
    <div class="layui-tab-item">内容-3</div>
    <div class="layui-tab-item">内容-4</div>
    <div class="layui-tab-item">内容-5</div>
  </div>
</div>

卡片风格

<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
    <li>标签4</li>
    <li>标签5</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容-1</div>
    <div class="layui-tab-item">内容-2</div>
    <div class="layui-tab-item">内容-3</div>
    <div class="layui-tab-item">内容-4</div>
    <div class="layui-tab-item">内容-5</div>
  </div>
</div>

三：hash 状态匹配

 切换 tab 标签项后，地址栏同步 hash 值，当页面刷新时，tab 仍保持对应的切换状态

<div class="layui-tab" lay-filter="test-hash">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">标签1</li>
    <li lay-id="22">标签2</li>
    <li lay-id="33">标签3</li>
    <li lay-id="44">标签4</li>
    <li lay-id="55">标签5</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容-1</div>
    <div class="layui-tab-item">内容-2</div>
    <div class="layui-tab-item">内容-3</div>
    <div class="layui-tab-item">内容-4</div>
    <div class="layui-tab-item">内容-5</div>
  </div>
</div>
<script>
layui.use(function(){
  var element = layui.element;
  
  // hash 地址定位
  var hashName = 'tabid'; // hash 名称
  var layid = location.hash.replace(new RegExp('^#'+ hashName + '='), ''); // 获取 lay-id 值
    
  // 初始切换
  element.tabChange('test-hash', layid);
  // 切换事件
  element.on('tab(test-hash)', function(obj){
    location.hash = hashName +'='+ this.getAttribute('lay-id');
  });
});
</script>

四：tab相关操作

渲染 tab

element.render('tab', filter);

  • 参数 'tab' 是渲染 tab 的固定值
  • 参数 filter : 对应 tab 容器 lay-filter 的属性值

      tab 组件会在元素加载完毕后，自动对 tab 元素完成一次渲染，因此该方法主要用于对动态插入的 tab 元素的初始化渲染

<div id="test"></div>
<script>
layui.use(function(){
  var element = layui.element;
  var $ = layui.$;
  // 动态插入 tab 元素
  $('#test').html(`
    <div class="layui-tab" lay-filter="demo-filter-tab">
      <!-- … -->
    </div>
  `);
  // 渲染 tab 组件
  element.render('tab', 'demo-filter-tab');
});
</script>

添加 tab

element.tabAdd(filter, options);

  • 参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
  • 参数 options : 添加 tab 时的属性可选项，见下表：
options描述类型
title选项卡的标题string
content选项卡的内容，支持传入 htmlstring
id选项卡标题元素的 lay-id 属性值string

删除 tab

element.tabDelete(filter, layid);

  • 参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
  • 参数 layid : 选项卡标题元素的 lay-id 属性值

切换 tab

element.tabChange(filter, layid);

  • 参数 filter : tab 容器（class="layui-tab"）的 lay-filter 属性值
  • 参数 layid : 选项卡标题元素的 lay-id 属性值

自定义 tab

element.tab(options);

  • 参数 options : 属性可选项，见下表：
options描述类型
headerElem指定自定义的 tab 头元素项选择器string / DOM
bodyElem指定自定义的 tab 主题内容元素项选择器string / DOM

该方法用于绑定自定义 tab 元素（即非 class="layui-tab 定义的结构）。示例如下：

<style>
.demo-tab-header .layui-btn.layui-this{border-color: #1E9FFF; color: #1E9FFF;}
.demo-tab-body>div{display: none;}
</style>
<!-- 任意自定义的 tab 元素 -->
<div class="demo-tab-header layui-btn-container" id="tabHeader">
  <button class="layui-btn layui-btn-primary layui-this">标签1</button>
  <button class="layui-btn layui-btn-primary">标签2</button>
  <button class="layui-btn layui-btn-primary">标签3</button>
</div>
<div class="demo-tab-body" id="tabBody">
  <div class="layui-show">内容-1</div>
  <div>内容-2</div>
  <div>内容-3</div>
</div>
<script>
layui.use(function(){
  var element = layui.element;
  // 绑定自定义的 tab 元素
  element.tab({
    headerElem: '#tabHeader>.layui-btn',
    bodyElem: '#tabBody>div'
  });
});
</script>

五：事件

tab 切换事件

element.on('tab(filter)', callback);

  • 参数 tab(filter) 是一个特定结构。
    • tab 为 tab 切换事件固定值；
    • filter 为 tab 容器属性 lay-filter 对应的值。
  • 参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数

例如：点击 tab 选项切换时触发

var element = layui.element;
 
// tab 切换事件
element.on('tab(filter)', function(data){
  console.log(this); // 当前 tab 标题所在的原始 DOM 元素
  console.log(data.index); // 得到当前 tab 项的所在下标
  console.log(data.elem); // 得到当前的 tab 容器
});

tab 删除事件

element.on('tabDelete(filter)', callback);

  • 参数 tabDelete(filter) 是一个特定结构。
    • tabDelete 为 tab 删除事件固定值；
    • filter 为 tab 容器属性 lay-filter 对应的值。
  • 参数 callback 为事件执行时的回调函数，并返回一个 object 类型的参数。

例如：点击 tab 选项删除时触发

var element = layui.element;
 
// tab 删除事件
element.on('tabDelete(filter)', function(data){
  console.log(data.index); // 得到被删除的 tab 项的所在下标
  console.log(data.elem); // 得到当前的 tab 容器
});

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

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

相关文章

华为云云耀云服务器L实例评测 | 基于docker部署nacos2.2.3服务

华为云云耀云服务器L实例评测 | 基于docker部署nacos2.2.3服务

#【有奖征文】华为云云服务器焕新上线&#xff0c;快来亲身感受评测吧&#xff01;# &#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&…
阅读更多...
C++之哈希表、哈希桶的实现

C++之哈希表、哈希桶的实现

哈希表、哈希桶的实现 哈希概念哈希冲突哈希函数哈希冲突解决闭散列哈希表闭散列实现哈希表的结构哈希表的插入哈希表的查找哈希表的删除 开散列开散列概念哈希表的结构哈希表的插入哈希表的查找哈希表的删除 哈希概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置…
阅读更多...
Postman使用_Tests Script（断言测试）

Postman使用_Tests Script（断言测试）

断言测试可以在Collection、Folder和Request的 pre-request script 和 test script中编写&#xff0c;测试脚本可以检测请求响应的各个方面&#xff0c;包括正文、状态代码、头、cookie、响应时间等&#xff0c;只有测试符合自定义的要求后才能通过。 pm对象提供了测试相关功能…
阅读更多...
LiveNVR监控流媒体Onvif/RTSP功能-支持海康摄像头海康NVR通过EHOME协议ISUP协议接入分发视频流或是转GB28181

LiveNVR监控流媒体Onvif/RTSP功能-支持海康摄像头海康NVR通过EHOME协议ISUP协议接入分发视频流或是转GB28181

LiveNVR支持海康NVR摄像头通EHOME接入ISUP接入LiveNVR分发视频流或是转GB28181 1、海康 ISUP 接入配置2、海康设备接入2.1、海康EHOME接入配置示例2.2、海康ISUP接入配置示例 3、通道配置3.1、直播流接入类型 海康ISUP3.2、海康 ISUP 设备ID3.3、启用保存3.4、接入成功 4、相关…
阅读更多...
SadTalker 让图片说话

SadTalker 让图片说话

参考&#xff1a;https://github.com/OpenTalker/SadTalker 其他类似参考&#xff1a;https://www.d-id.com/ 输入图片加音频产生2d视频 安装使用 1、拉取github&#xff0c;下载对应安装库 2、下载对应模型baidu网盘 新建checkpoints&#xff0c;把下载sadtalker里模型拷贝进…
阅读更多...
Docker 的使用

Docker 的使用

一、Docker 的作用和优势 软件集装箱化平台&#xff0c;可让开发者构建应用程序时&#xff0c;将它与环境一起打包到一个容器中&#xff0c;发布应用到任意平台中。 能在单台机器上运行多个Docker微容器&#xff0c;而每个微容器里都有一个微服务或独立应用&#xff0c; 如&am…
阅读更多...
汽车行业新闻稿怎么写？怎么写关于汽车的新闻稿？

汽车行业新闻稿怎么写？怎么写关于汽车的新闻稿？

撰写汽车行业新闻稿需要遵循一定的结构和要点&#xff0c;以确保内容准确、清晰&#xff0c;并能吸引读者的兴趣。以下是关于汽车的新闻稿的一些写作要点和建议&#xff0c;接下来伯乐网络传媒就来给大家分享一下&#xff1a; 标题醒目&#xff1a;新闻稿的标题应该简洁明了&am…
阅读更多...
多视角姿势估计：TEMPO: Efficient Multi-View Pose Estimation, Tracking, and Forecasting

多视角姿势估计：TEMPO: Efficient Multi-View Pose Estimation, Tracking, and Forecasting

论文作者&#xff1a;Rohan Choudhury,Kris Kitani,Laszlo A. Jeni 作者单位&#xff1a;Carnegie Mellon University 论文链接&#xff1a;http://arxiv.org/abs/2309.07910v1 内容简介&#xff1a; 1&#xff09;方向&#xff1a;多视角姿势估计模型 2&#xff09;应用&…
阅读更多...
$value$plusargs字符串参数传递后如何随机

$value$plusargs字符串参数传递后如何随机

文章目录 前言一、背景二、解决办法总结 前言 在仿真过程中&#xff0c;经常在命令行通过$value$plusargs传递一个字符串到环境中&#xff0c;去选择不同的sequence&#xff0c;但是&#xff0c;有些时候需要随机选择其中某几个seq&#xff0c;而只有整数和枚举类型可以随机&a…
阅读更多...
Ubuntu20.04安装Nvidia显卡驱动、CUDA11.3、CUDNN、TensorRT、Anaconda、ROS/ROS2

Ubuntu20.04安装Nvidia显卡驱动、CUDA11.3、CUDNN、TensorRT、Anaconda、ROS/ROS2

1.更换国内源 打开终端&#xff0c;输入指令&#xff1a; wget http://fishros.com/install -O fishros && . fishros 选择【5】更换系统源&#xff0c;后面还有一个要输入的选项&#xff0c;选择【0】退出&#xff0c;就会自动换源。 2.安装NVIDIA驱动 这一步最痛心…
阅读更多...
腾讯mini项目-【指标监控服务重构】2023-08-03

腾讯mini项目-【指标监控服务重构】2023-08-03

今日已办 a&#xff0c;b两组的trace放到一个分支里 可以看到先前的没看到的 profile trace 的耗时&#xff0c;是由于时间跨度较长&#xff0c;没有滑动到 trace 末尾 明日待办 组长会议汇报项目进度和问题
阅读更多...
我跟面试官说MySQL单表数据量不要超过两千万，面试官不信

我跟面试官说MySQL单表数据量不要超过两千万，面试官不信

&#x1f449;导读 作为一个合格的 DBA&#xff0c;在遇到线上单表数据量超过千万级别的时候&#xff0c;往往会建议用户通过分表来缩减单表数据量&#xff0c;当用户问为什么单表数据量不能超过千万时&#xff0c;DBA 往往会说&#xff1a;单表数据量超过千万&#xff0c;会影…
阅读更多...
搜好货API接口解析，实现获得搜好货商品详情

搜好货API接口解析，实现获得搜好货商品详情

要解析搜好货API接口并实现获取搜好货商品详情&#xff0c;你需要按照以下步骤进行操作&#xff1a; 了解搜好货开放平台&#xff1a;访问搜好货开放平台官网&#xff0c;找到API接口相关的开发者文档、指南等信息。注册开发者账号&#xff1a;在搜好货开放平台上注册一个开发…
阅读更多...
C#开发的OpenRA游戏之调试菜单2

C#开发的OpenRA游戏之调试菜单2

C#开发的OpenRA游戏之调试菜单2 前面已经分析了怎么样通过选项参数来打开这个调试界面，当创建游戏之后，从游戏里选择参数按钮，就会弹出下面的界面，如果没有选择调试参数是没有Debug这一页选项卡： 上面调试的选项是非常有用的，否则不能快速地测试游戏，不能快速地开发新的…
阅读更多...
列表页面新增 字段查询 ，点击查询后，前端页面和后端控制台 出现红色报错信息，查询数据失败。

列表页面新增 字段查询 ，点击查询后，前端页面和后端控制台 出现红色报错信息，查询数据失败。

项目场景&#xff1a; 项目场景简述&#xff1a; 列表页面新增 字段查询 &#xff0c;点击查询后&#xff0c;前端页面和后端控制台 出现红色报错信息&#xff0c;查询数据失败。 问题描述 问题描述&#xff1a; <el-select v-model"dataForm.engineerId" clea…
阅读更多...
类和对象（4）

类和对象（4）

文章目录 1. C/C内存分布2. C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free3.C内存管理方式new/delete3.1 new/delete操作内置类型3.2 new/delete操作自定义类型 4. operator new和operator delete函数&#xff08;重点&#xff09;4.1底层原理 5.malloc/free…
阅读更多...
24届双非本科找工作到底有多难

24届双非本科找工作到底有多难

记录一下自己的找工作过程&#xff0c;今天笔试失败感觉整个人都颓废了(那家公司真的是我的目标情司&#xff0c;呜呜呜&#xff0c;感觉我是废物)。 再加上不考虑出省&#xff0c;感觉找工作太难了 介绍一下自己情况&#xff1a;三个省奖&#xff08;开发类的&#xff0c;负责…
阅读更多...
性能测试模型-业务模型、策略模型、数据模型

性能测试模型-业务模型、策略模型、数据模型

针对性能测试具体方案的设计进行抽象和总结，将其归纳为6个性能测试模型。 业务模型 业务模型是一组功能点或接口的集合及其占比情况，用于合理地模拟生产上真实的业务发生场景 在实施范围上，业务模型为本项目明确实施范围，梳理涉及的业务系统及其完整链路等 在实施结果价值…
阅读更多...
提示词加神秘咒语让大模型更加聪明

提示词加神秘咒语让大模型更加聪明

谷歌团队研究发现&#xff0c;提示词加上神秘咒语深呼吸(take a deep breath&#xff09;结合大家已经熟悉的“一步一步地想”&#xff08;Let’s think step by step&#xff09;&#xff0c;大模型在数据集上的成绩就提升了12%。而且这个最有效的提示词&#xff0c;是AI自己找…
阅读更多...
bug总结问题集和知识点集（一）

bug总结问题集和知识点集（一）

目录 一 bug问题集1. 端口被占用 二 oracle1. oracle查看版本怎么操作2. oracle数据库&#xff1a;参数个数无效![在这里插入图片描述](https://img-blog.csdnimg.cn/6a2eebc164f9406c81525371893bbd11.png)3. ORACLE数据库如何完整卸载? 三 mybatis1. mybatis用注解如何实现模…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023