Tabs选项卡切换
开发工具与关键技术：JS
作者：赵纯雨
班级：1803
撰写时间：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标签之后，因为你是把界面的宽度设置死了的，所以界面不管你添加多少选项卡，他都是不会变形的，他而是在最右边出现一个箭头符号，当容器的宽度不足以显示全部的选项时，即会自动出现展开图标，点击箭头，展示剩余的部分，如下图所示：这是未展开前，当你宽度不够时，自动出现展开图标、
点击箭头，展示剩下的部分
