layui tab 竖列展示

<style>
    .layui-tab-title{border-bottom: none;}/* 重置 - 去掉下划线 */
    .layui-tab-title .layui-this{background: #FFAF09;}/* 增加背景 */
    .layui-tab-title .layui-this:after{border: none;}/* 重置 -this无边框 */
    .layui-tab-title li{display: list-item;}/* 重置 -纵向显示 */
</style>

<div class="layui-tab">
    <ul class="layui-tab-title layui-col-md3">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content  layui-col-md9">
        <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>

转载请注明出处:

转载自http://lxfamn.cn/blog

未经允许不得转载：lxfamn » layui tab 竖列展示