Tabs选项卡切换
开发工具与关键技术:JS
撰写时间:2019.7.5
Tabs选项卡切换,他就是能够在一个页面里面通过点击Tabs选项卡进行切换,从而显示多个内容,点击进到页面之后,一般设的都是第一个标签为第一个页面,在li标签里面添加内容,你需要多少,就添加多少,代码如下:
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">尺码管理</li>
<li>尺码组管理</li>
</ul>
</div>
通过通过追加class:layui-tab-card来设定卡片风格,这个里面就是你添加Tabs选项卡的位置,我把这两个添加好之后,在页面显示就是这样的:
这个就上面你添加的内容,通过给他一个点击事件,跳转到尺码组管理,
<div class="layui-tab-content">
@*尺码管理*@
<div class="layui-tab-item layui-show">
<form id="forSize" action="" method="post">
<div>
<input type="text" id="chiID" name="SizeManagementID" hidden />
<label class="mx-3">尺码编号:</label>
<input type="text" style="width:120px;height:20px;" id="chi" name="SizeNumber" />
<span style="color:#808080;">(无重复,如:S,39,35B,165等)</span>
</div>
<table id="employee" lay-filter="employee"></table>
</form>
</div>
@*尺码组管理*@
<div class="layui-tab-item">
<div class="row m-0 p-0">
<div class="col-9">
<span style="color:#808080;">
(注:请直接在网格中选择相应的尺码创建尺码组;<br />
每一行表示一个尺码组,行号就是尺码组的序号,建议不多于四个尺码组.<br />
若删除整行,选中行后(支持多选),按键盘的删除键Delete即可)
</span>
</div>
<div class="col-3">
<button type="button" class="layui-btn layui-btn-sm" style="height:20px;line-height:20px;font-size:10px;position:relative;top:30px;">保存尺码组</button>
</div>
</div>
<div id="table" class="container-fluid">
</div>
</div>
</div>
在外部给他一个div,然后给他追加一个class:layui-tab-content,从而进行通过点击去进行切换,如果你没写这个的话,你是转换不了的,然后再在里面写入你li标签里面的内容,如下图所示:
这个就成功的切换到另一个选项卡里面了,你想要多少选项卡就添加多少,直接在上面的ul标签里面再加一个li标签,再在li标签里面写入你选项卡命名的名称,如下列所示:
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">尺码管理</li>
<li>尺码组管理</li>
<li>尺码组管理</li>
<li>尺码组管理</li>
……
</ul>
</div>
当你添加了10个li标签之后,因为你是把界面的宽度设置死了的,所以界面不管你添加多少选项卡,他都是不会变形的,他而是在最右边出现一个箭头符号,当容器的宽度不足以显示全部的选项时,即会自动出现展开图标,点击箭头,展示剩余的部分,如下图所示:这是未展开前,当你宽度不够时,自动出现展开图标、
点击箭头,展示剩下的部分