layui引入tab切换

这里主要介绍如何在页面中引入tab切换

/**
 *  css部分代码
 */
<link rel="stylesheet" type="text/css" href="js/common/UILab/layui2.4.5/css/layui.css" />

/**
 *  html
 */
<div class="layui-tab" lay-filter="all">
  <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</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
 */
<script type="text/javascript" src="js/common/UILab/layui2.4.5/layui.js"></script>
<script>
layui.use('element', function(){
  var $ = layui.jquery;
  var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  element.on('tab(prev)', function(data){});
  element.on('tab(all)', function(data){
    if(data.index == 0){
      console.log("内容1");
    } else if(data.index == 1){
      console.log("内容2");
    }    
  });
});
</script>