// 对 class="layui-tabs" 所在标签进行初始化渲染
tabs.render();

<div id="test"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var tabs = layui.tabs;
  tabs.render({
    elem: '#test',
    header: [
      { title: 'Tab1' },
      { title: 'Tab2' }
    ],
    body: [
      { content: 'Tab content 1' },
      { content: 'Tab content 2' }
    ],
    index: 0, // 初始选中标签索引
  })
});
</script>

// 给任意元素绑定 Tab 功能
tabs.render({
  elem: '#demoTabs3', // 目标主容器选择器
  header: ['#demoTabsHeader', '>button'], // 标签头部主元素选择器、标签头部列表选择器
  body: ['#demoTabsBody', '>.test-item'] // 标签内容主元素选择器、标签内容列表选择器
});

tabs.add('test', {
  title: 'New Tab 1',
  content: 'New Tab Content 1',
  done: function(data) {
    console.log(data); // 标签相关数据

    // 为新标签头添加任意属性
    data.headerItem.attr('lay-tips', '111');
  }
});

tabs.close('test', 3); // 关闭索引为 3 的标签
tabs.close('test', 3, true); // 强制关闭索引为 3 的标签
tabs.close('test', 'abc'); // 关闭 lay-id="abc" 的标签

tabs.closeMult(id, 'other'); // 关闭除当前活动标签外的其他标签
tabs.closeMult(id, 'other', 3); // 关闭除索引为 3 的标签外的其他标签
tabs.closeMult(id, 'other', 'ccc'); // 关闭除 lay-id="ccc" 的标签外的其他标签

tabs.closeMult(id, 'right'); // 关闭当前活动标签的右侧所有标签
tabs.closeMult(id, 'right', 3); // 关闭索引为 3 的标签的右侧所有标签
tabs.closeMult(id, 'right', 'ccc'); // 关闭 lay-id="ccc" 的标签的右侧所有标签

tabs.closeMult(id, 'all'); // 关闭所有标签

tabs.change('test', 3); // 切换到索引为 3 的标签
tabs.change('test', 3, true); // 强制切换到索引为 3 的标签
tabs.change('test', 'abc'); // 切换到 lay-id="abc" 的标签
tabs.change('test', 'abc', true); // 强制切换到 lay-id="abc" 的标签

var data = tabs.data('test');
console.log(data);

{
  options, // 标签配置信息
  container, // 标签容器的相关元素
  thisHeaderItem, // 当前活动标签头部项
  thisBodyItem, // 当前活动标签内容项
  index, // 当前活动标签索引
  length, // 标签数量
}

var headerItem = tabs.getHeaderItem('test', 3); // 获取索引为 3 的标签头部项元素
var headerItem = tabs.getHeaderItem('test', 'abc'); // 获取 lay-id="abc" 的标签头部项元素

var bodyItem = tabs.getBodyItem('test', 3); // 获取索引为 3 的标签内容项元素
var bodyItem = tabs.getBodyItem('test', 'abc'); // 获取 lay-id="abc" 的标签内容项元素

tabs.refresh('test'); // 刷新标签视图

tabs.on('afterRender(testID)', function(data){
  console.log(data); // 标签相关数据
});

// tabs 切换前的事件
tabs.on(`beforeChange(testID)`, function(data) {
  console.log(data); // 标签相关数据
  console.log(data.from.index); // 切换前的选中标签索引
  console.log(data.from.headerItem); // 切换前的选中标签头部项
  console.log(data.to.index); // 切换后的选中标签索引
  console.log(data.to.headerItem); // 切换后的选中标签头部项

  // 阻止标签默认切换
  return false;
});

// tabs 切换后的事件
tabs.on('afterChange(testID)', function(data) {
  console.log(data);
});

// tabs 关闭后的事件
tabs.on('afterClose(testID)', function(data) {
  console.log(data);
});