Tab选项卡

Tab选项卡

开发工具与关键技术：Visual Studio 2015
作者：徐晶旗
撰写时间：2019年6月8日 

选项卡是什么呢？选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。下面是我在layui文档中找的一些写tab选项卡的方法实例。

代码的实现：

1.	<div class="layui-tab layui-tab-card">
2.	<ul class="layui-tab-title">
3.	<li class="layui-this">网站设置</li>
4.	<li>用户管理</li>
5.	<li>权限分配</li>
6.	<li>商品管理</li>
7.	<li>订单管理</li>
8.	</ul>
9.	<div class="layui-tab-content" style="height: 100px;">
10.	<div class="layui-tab-item layui-show">1</div>
11.	<div class="layui-tab-item">2</div>
12.	<div class="layui-tab-item">3</div>
13.	<div class="layui-tab-item">4</div>
14.	<div class="layui-tab-item">5</div>
15.	<div class="layui-tab-item">6</div>
16.	</div>
17.	</div>

然后接下来还要到js中加载一下模块，其实无论是导航、还是Tab，都需依赖 element模块，大部分都是在加载完该模块后自动完成的。

 layui.use('element', function () {

这里说一下它的实现原理：选项卡的内容是显示还是隐藏是由activeTab的值决定的，而这个值是通过选项卡上面的ng-click指令设置的。

在网上搜了挺多做tab选项卡功能的方法，不过还是觉得上面的方法最适用我这个项目，所以我做项目的时候就是效仿上面的代码，写出了tab选项卡的功能，下图是我做项目时的实例，当我鼠标点击上边标题栏的某一li时，下边显示的内容进行相应的改变。至于代码就不展示呐，大家有兴趣也可以参照上面的代码去做自己的tab选项卡?

思路：
1、首先获取元素。
2、给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换，就要给它多个值来实现切换功能。for循环历遍按钮元素添加onclick 或者 onmousemove事件。
3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。
4、把当前按钮添加样式，把当前DIV显示出来，display设置为block。
当然，也不要忘记引入layui的插件哦！

注：这里有些文字信息是来自于网上搜索 ?