007-选项卡

最新推荐文章于 2024-09-22 22:16:43 发布
最新推荐文章于 2024-09-22 22:16:43 发布
阅读量421 收藏
点赞数
分类专栏： layui学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aihiao/article/details/113030618
版权
本文详细介绍了Layui框架中Tab选项卡的使用方法，包括默认样式、简洁风格、卡片风格的实现，以及支持删除、ID定位和响应式设计。通过示例代码展示了如何创建带删除功能的Tab以及利用lay-id进行页面定位。同时提供了完整的HTML代码示例和实际效果截图。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. Tab选项卡广泛应用于Web页面, 因此我们也对其进行了良好的支持。Layui内置多种Tab风格, 支持删除选项卡、并提供响应式支持。

2. 选项卡依赖加载组件: element。

3. 选项卡使用

名称

组合

默认

class="layui-tab"

选项卡标题容器

class="layui-tab-title"

指向当前选项卡标题

class="layui-this"

选项卡内容容器

class="layui-tab-content"

选项卡内容项

class="layui-tab-item"

展示选项卡内容项

class="layui-tab-item layui-show"

4. 默认Tab选项卡

4.1. 值得注意的是, 如果存在layui-tab-item的内容区域, 在切换时自动定位到对应内容。如果不存在内容区域, 则不会定位到对应内容。

4.2. 实例

<div class="layui-tab">
  	<ul class="layui-tab-title">
	    <li class="layui-this">网站设置</li>
	    <li>用户管理</li>
	    <li>权限分配</li>
	    <li>商品管理</li>
	    <li>订单管理</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>

5. Tab简洁风格

5.1. 通过追加class: layui-tab-brief来设定简洁风格。

<div class="layui-tab layui-tab-brief">
	<ul class="layui-tab-title">
	    <li class="layui-this">网站设置</li>
	    <li>用户管理</li>
	    <li>权限分配</li>
	    <li>商品管理</li>
	    <li>订单管理</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>

6. Tab卡片风格

6.1. 通过追加class: layui-tab-card来设定卡片风格。

<div class="layui-tab layui-tab-card">
  	<ul class="layui-tab-title">
	    <li class="layui-this">网站设置</li>
	    <li>用户管理</li>
	    <li>权限分配</li>
	    <li>商品管理</li>
	    <li>订单管理</li>
  	</ul>
  	<div class="layui-tab-content" style="height: 100px;">
	    <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>

7. 带删除的Tab

7.1. 你可以对父层容器设置属性lay-allowClose="true"来允许Tab选项卡被删除。

<div class="layui-tab" lay-allowClose="true">
  	<ul class="layui-tab-title">
	    <li class="layui-this">网站设置</li>
	    <li>用户管理</li>
	    <li>权限分配</li>
	    <li>商品管理</li>
	    <li>订单管理</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>

8. ID焦点定位

8.1. 你可以通过对选项卡设置属性lay-id="xxx"来作为唯一的匹配索引, 以用于外部的定位切换, 如后台的左侧导航、以及页面地址hash的匹配。

<div class="layui-tab" lay-filter="test1">
  	<ul class="layui-tab-title">
	    <li class="layui-this" lay-id="111" >文章列表</li>
	    <li lay-id="222">发送信息</li>
	    <li lay-id="333">权限分配</li>
	    <li lay-id="444">审核</li>
	    <li lay-id="555">订单管理</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>

8.2. 属性lay-id是扮演这项功能的主要角色, 它是动态操作的重要凭据, 如:

<script type="text/javascript">
	// 注意: 选项卡依赖element模块, 否则无法进行功能性操作
	layui.use('element', function(){
		var element = layui.element;

		// 获取hash来切换选项卡, 假设当前地址的hash为lay-id对应的值
		var layid = location.hash.replace(/^#test1=/, '');
		element.tabChange('test1', layid); // 假设当前地址为: http://a.com#test1=222, 那么选项卡会自动切换到"发送消息"这一项
		  
		// 监听Tab切换, 以改变地址hash值
		element.on('tab(test1)', function(){
		  	location.hash = 'test1='+ this.getAttribute('lay-id');
		});
	});
</script>

8.3. 同样的还有增加选项卡和删除选项卡, 都需要用到lay-id。

9. 例子

9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>选项卡 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<div class="layui-tab">
		  	<ul class="layui-tab-title">
			    <li class="layui-this">网站设置</li>
			    <li>用户管理</li>
			    <li>权限分配</li>
			    <li>商品管理</li>
			    <li>订单管理</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">网站设置</li>
			    <li>用户管理</li>
			    <li>权限分配</li>
			    <li>商品管理</li>
			    <li>订单管理</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">网站设置</li>
			    <li>用户管理</li>
			    <li>权限分配</li>
			    <li>商品管理</li>
			    <li>订单管理</li>
		  	</ul>
		  	<div class="layui-tab-content" style="height: 100px;">
			    <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" lay-allowClose="true">
		  	<ul class="layui-tab-title">
			    <li class="layui-this">网站设置</li>
			    <li>用户管理</li>
			    <li>权限分配</li>
			    <li>商品管理</li>
			    <li>订单管理</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" lay-filter="test1">
		  	<ul class="layui-tab-title">
			    <li class="layui-this" lay-id="111" >文章列表</li>
			    <li lay-id="222">发送信息</li>
			    <li lay-id="333">权限分配</li>
			    <li lay-id="444">审核</li>
			    <li lay-id="555">订单管理</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 type="text/javascript">
			// 注意: 选项卡依赖element模块, 否则无法进行功能性操作
			layui.use('element', function(){
  				var element = layui.element;

  				// 获取hash来切换选项卡, 假设当前地址的hash为lay-id对应的值
				var layid = location.hash.replace(/^#test1=/, '');
				element.tabChange('test1', layid); // 假设当前地址为: http://a.com#test1=222, 那么选项卡会自动切换到"发送消息"这一项
				  
				// 监听Tab切换, 以改变地址hash值
				element.on('tab(test1)', function(){
				  	location.hash = 'test1='+ this.getAttribute('lay-id');
				});
			});
		</script>
	</body>
</html>

9.2. 效果图

layui Tab切换
weixin_41128842的博客
12-23 2740
layui-html元素 <ul class="layui-tab-title" id="myTab"> <li class="layui-this" lay-id="demo1">表格列表</li> <li lay-id="demo2">数据图表</li> </ul> hash定位 //Hash地址的定位 var la...
layui tab标签 设置只读，不可手动切换 外部按钮切换tab
小半仙儿
09-05 3107
<div class="layui-tab layui-tab-brief" readonly lay-filter="demo"> <ul class="layui-tab-title" style="pointer-events: none;"> <li class="layui-this">演示说明</li> <li>日期</li> <li readonly >分页</li>
LayUI框架——选项卡等element组件使用
让优秀成为一种习惯！
07-12 2123
在项目中我们需要编写许多页面，在页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换等操作。他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以在Layui框架中统一归类为element组件。跟表单一样，基于元素属性和事件驱动的接口书写方式。element。
layui选项卡切换及右键的动态操作（新增、切换、删除）
honvin的博客
09-29 1万+
要实现的效果：选项卡的新增以及切换、选项卡刷新、选项卡各种删除：删除其他、删除右侧所有、删除所有
layui如何做Tab列表切换功能
csdn_zym1101的博客
05-31 3219
第一步：找到官方文档中的选项卡实例，复制代码 https://www.layui.com/demo/tab.html 默认风格Tab的代码： <div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li&...
鸿蒙开发-选项卡 (Tabs)
最新发布
weixin_65051584的博客
09-22 2029
对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。图9自定义导航栏系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏需要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。
【愚公系列】《微信小程序开发解析》007-基础内容组件
热门推荐
时光隧道
07-11 5万+
在微信小程序中，基础内容组件是用于构建用户界面和展示内容的基本元素。这些组件提供了丰富的功能和灵活的布局方式，使开发者能够创建直观、互动和响应迅速的小程序界面。nodes类型默认值: []说明: 要展示的HTML节点列表或HTML字符串。space类型: String默认值: “”说明: 设置text节点之间的空格。支持的值为enspemsp和nbsp。类型: Boolean默认值: false说明: 设置富文本是否可以被用户选择。selectable类型: Boolean默认值。
HTML+CSS实现的滑动门选项卡
06-10
在这个例子中，`ul.tabs` 包含了所有选项卡，每个 `li` 元素对应一个选项卡，而 `.content` 包含了所有内容，每个 `.content-item` 对应一个内容区块。 **CSS 设计** 滑动门选项卡的CSS设计主要包括以下几个部分：...
uni-app内置选项卡切换
11-11
以下是uni-app内置选项卡切换的示例代码： ```html <view v-for="(item, index) in navList" :key="index" :class="['nav-item', navIndex === index ? 'active' : '']" @click="checkIndex(index)"> {{ ...
uni-app 选项卡 swiper点击切换可滑动切换页面
weixin_50538763的博客
09-23 2514
【代码】uni-app 选项卡 swiper点击切换可滑动切换页面。
Layui 如何获取弹出框元素，如何修改样式(包含按钮，Title)
HOWARD SHANG
09-09 3627
Layui 弹出框 如何修改样式 本文是适用于 弹出框格式是采用 字符串拼接的方式；success() 函数会在弹出框加载完成之后加载，但是并不能直接通jQuery：$('.XXXXX') 获取弹出框样式里面的dom元素，可以直接通过success()的参数layero，直接获取和修改相关的dom， // 弹出框样式 var addprogram = "<table class='layui-table'>"+ "<tr>"+ ...
layui table全选checkbox取值
webnoties的专栏
10-30 3628
layui table全选checkbox取值 <table id="table_list_table" class="layui-table" lay-filter="table_list"></table> layui.use(['table', 'form'], function () { var $ = layui.$; var id_lists = []; var table = layui.table;
layui 的常用元素操作 element
xingnang2008的专栏
04-24 2122
“页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为element组件。跟表单一样，基于元素属性和事件驱动的接口书写方式。”——引 自layui文档 可以总结为：layui.js通过 element来控制管理一些常用的页面元素，如tab,nav,breadcrumb(面...
vue3中element tabs标签页 tab-click事件无法拿到最新值
红烧咸咸鱼
07-26 1745
vue3中element tabs标签页 tab-click事件无法拿到最新值
element,点击查看，实现tab切换：
weixin_30919919的博客
11-28 1675
点击查看，实现tab切换： 代码如下： <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-tabl...
layui——element模块
lxw1005192401的博客
10-12 1万+
介绍 对页面中一部分元素（tab、progress、nav、breadcrumb、collapse）的操作需要处理接口，layui统一放到element模块处理； 1 预设元素属性 我们通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层；element模块支持的元素如下表： 属性名 可选值 说明 lay-filter 任意字符 事件过滤器（公用属性），主要用于事件的精确...
Element-Ui组件之Radio 单选框（点击和el-tabs点击）
霓虹深处
07-16 1万+
基础用法单选框组&lt;el-radio-group v-model="radio1"&gt; &lt;el-radio :label="3"&gt;备选项&lt;/el-radio&gt; &lt;el-radio :label="6"&gt;备选项&lt;/el-radio&gt; &lt;el-radio :label="
layui tab选项卡外部html页面,layui tab选项卡默认/切换定位所在选项
weixin_36221525的博客
06-03 1754
使用layui时，tab切换当弹出页面改变某一选项区中的内容后，让其其他内容同步刷新，且内容选项定位在指定的区域；1、html：订单信息商品信息审核记录1111111111111111333333332、javascript：layui.use(['form', 'layer', 'table', 'laytpl', 'laydate', 'element'], function() {var f...
vue依赖如element全局引入
Wming优快云的博客
07-09 1280
2.vue.config.js configureWebpack: { performance: { hints: false }, externals: { ‘jquery’ : ‘$’, ‘vue’: ‘Vue’, ‘vue-router’: ‘VueRouter’, ‘vuex’: ‘Vuex’, ‘axios’: ‘axios’, ‘element-ui’: ‘ELEMENT’ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值