学斋随笔，初九潜龙勿用，-42关于选项卡

　　　　目前在做一个项目的练习，那么需要用到选项卡，如何使用呢？

　　　　我们需要先下载layui，用里面的选项卡比较方便，在使用的时候，引入layui.css

　　　　下面提供 个简单的选项卡

　　　　

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <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>
</di简洁的

简洁的

 　　通过追加class：layui-tab-brief 来设定简洁风格。

　　再来一个卡片风格的

<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <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 class="layui-tab-item">6</div>
  </div>
</div>
 

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

　　当然，我们也不能就这么用了，需要根据需要进行css的一些调试，直到你满意为止。

　　（ps：本文引用代码来自layui网站）