layui选项卡总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41179401/article/details/84871856

layui选项卡总结

选项容器的类名是class="layui-tab" 选项的类名class="layui-tab-title"

选项内容容器的类名是class="layui-tab-content"选项内容的类名class="layui-tab-item layui-show"

layui-show是默认显示的选项内容

<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</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>
 
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
      

PS 通过追加class：layui-tab-brief 来设定简洁风格。
值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】

PS 通过追加class：layui-tab-card来设定卡片风格

PS 可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除

PS 通过对选项卡设置属性 lay-id="xxx" 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配。