选项卡

选项卡

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015、Tab选项卡

作者： 梁柏源

撰写时间：2019/5/27

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

今天分享Tab选项卡和TOP切换（就这样叫吧）这简单的操作，layui中有很多种Tab选项卡的风格，有支持删除的，有简洁风格的，卡片风格的，本次分享的是卡片风格的，另外layui.Tab选项卡是支持响应式的，当然口说无凭。

看代码：

<div class="card-body">

        <div class="layui-tab">

            <ul class="nav nav-tabs" id="myTab" role="tablist">

                <li class="nav-item">

                    <a class="nav-link active show" id="Tabadjustment" data-toggle="tab" href="#adjustment">VIP积分调整</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" id="Tabdetail" data-toggle="tab" href="#detail">VIP消费明细</a>

                </li>

            </ul>

        </div>

        <div class="tab-content" id="myTabContent">

            <div class="tab-pane fade active show" id="adjustment">

                @*构建表格*@

                <table id="tabadjustment" lay-filter="tabadjustment"></table>

            </div>

            <div class="tab-pane fade" id="detail">

                @*构建表格*@

                <table id="tabdetail" lay-filter="tabdetail"></table>

            </div>

        </div>

    </div>

上部分才是主要的，下部份纯属打酱油（是为了待会图片的真实性），上面代码中

<ul class="nav nav-tabs" id="myTab" role="tablist"><li class="nav-item"></li></ul>

 

 

这才是主题，<li></li>里面的就是我们选项卡的小标题啦，简单的说就是一个TOP切换和（tab选项卡）中有几个模块，就是看<li></li>这个标签的，有几个li标签这个TOP切换（tab选项卡）就有几个模块，以上演示的只有两个模块分别是VIP积分调整和VIP消费明细，当然说是代码前部分重要，但后部分就是前部分的内容啦。

<div class="tab-content" id="myTabContent">

<div class="tab-pane fade active show" id="adjustment"></div>

<div class="tab-pane fade" id="detail"></div>

</div>

这里就是放置我们的内容的，这里我放的是table表格，也可以放其他内容，在以上代码中主要的代码是layui-tab、tab-content和tab-pane fade，这种不需要依赖于element 模块；

当然除了这种还有另一种像是的，就是tab：

<div class="layui-tab">

<ul class="layui-tab-title">

<li class="layui-this">VIP积分调整</li>

<li>Vip消费明细</li>

</ul>

<div class="layui-tab-content">

<div class="layui-tab-item layui-show">

@*构建表格*@

<table id="tabdetail" lay-filter="tabdetail"></table>

</div>

<div class="layui-tab-item">

@*构建表格*@

<table id="tabdetail" lay-filter="tabdetail"></table>

</div>

</div>

</div>

<script>

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

var element = layui.element;

//…

});

</script>

这种选项卡比较依赖 element 模块，否则无法进行功能性操作，主要是存在如果不存在内容区域（也就是这个layui-tab-content），则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。

这两种（指上面的代码）方法运行后的效果都是一样的（其实layui的Tab选项卡有多种简单的方法来转换选项卡风格，不像TOP切换那样要转换风格就得设置样式等等的麻烦费时间。）

下面看一下运行的效果截图：

（注意看选项卡右上面的小标题，区分比较明显的）