layui如何做Tab列表切换功能

第一步：找到官方文档中的选项卡实例，复制代码

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>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </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>

必须加上JS，否则不能实现点击切换TAB的效果。

JS代码：

<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    tabAdd: function(){
      //新增一个Tab项
      element.tabAdd('demo', {
        title: '新选项'+ (Math.random()*1000|0) //用于演示
        ,content: '内容'+ (Math.random()*1000|0)
        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
      })
    }
    ,tabDelete: function(othis){
      //删除指定Tab项
      element.tabDelete('demo', '44'); //删除：“商品管理”
      
      
      othis.addClass('layui-btn-disabled');
    }
    ,tabChange: function(){
      //切换到指定Tab项
      element.tabChange('demo', '22'); //切换到：用户管理
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
  
  //Hash地址的定位
  var layid = location.hash.replace(/^#test=/, '');
  element.tabChange('test', layid);
  
  element.on('tab(test)', function(elem){
    location.hash = 'test='+ $(this).attr('lay-id');
  });
  
});
</script>

最后一步，如何通过切换Tab选项卡，显示不同的表格数据列表

1、给div添加过滤器 

lay-filter="tab-all"

2、给每个tab li添加data-status

<li data-status="" class="layui-this">汇总营收统计</li>
<li data-status="1">日营收统计</li>
<li data-status="2">按日统计图表</li>
<li data-status="3">按月统计图表</li>

3、每个li对应的div里面放table

<div class="layui-tab-item layui-show">
    <table id="table" lay-filter="table"></table>
</div>
<div class="layui-tab-item">
    <table id="table1" lay-filter="table1"></table>
</div>
<div class="layui-tab-item">
    按日统计图表
</div>
<div class="layui-tab-item">
    按月统计图表
</div>

4、写JQ获取表数据

tablist = table.render({
            elem: '#table',
            url: '/admin/Test/index',
            method: 'post',
            page:true,
            limit: 15,
            limits: [15, 20, 50, 100],
            cellMinWidth: 95,
            height: "full-85",
            id: "table",
            cols: [[
                {type: "checkbox", fixed: "left", width: 50},
                {field:'order_number',title:'订单号',align:'center',width:180},
                {field:'inventory',title:'项目名称',align:'center'},
                {field:'shop',title:'门店名称',align:'center'},
                {field:'receivable_money',title:'应收金额',align:'center',width:100},
                {field:'actual_money',title:'实收金额',align:'center',width:100},
                {field:'voucher',title:'代金券',align:'center',width:120},
                {field:'pay',title:'支付方式',align:'center',width:120},
                {field:'create_date',title:'购票时间',align:'center',width:200},
                {field:'source',title:'来源',align:'center',width:120},
                {field:'conductor',title:'售票员',align:'center',width:120},
                {field:'ticket_number',title:'票券数',align:'center',width:100},
                {title: '详情',templet:'#tool', width:130,fixed: "right", align: "center"}
            ]]
        });

<div class="layui-tab" lay-filter="tab-all">
    <ul class="layui-tab-title">
        <li data-status="" class="layui-this">汇总营收统计</li>
        <li data-status="1">日营收统计</li>
        <li data-status="2">按日统计图表</li>
        <li data-status="3">按月统计图表</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table id="table" lay-filter="table"></table>
        </div>
        <div class="layui-tab-item">
            <table id="table1" lay-filter="table1"></table>
        </div>
        <div class="layui-tab-item">
            按日统计图表
        </div>
        <div class="layui-tab-item">
            按月统计图表
        </div>
    </div>
</div>