LayUI 选项卡

概述

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符，更多使用官网查看。

官网：https://www.layui.com/doc/element/tab.html

使用

基础选项卡 模板

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>默认风格的Tab</legend>
</fieldset>

<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">
        <!-- layui-show 默认展示的选项卡 -->
        <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>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element'],function () {
    })
</script>

三种风格

默认风格：class="layui-tab"

简洁风格：class="layui-tab layui-tab-brief"

卡片风格：class="layui-tab layui-tab-card"

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>默认风格</legend>
</fieldset>
<div class="layui-tab" lay-filter="test">
    <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">
            点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
        </div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>简洁风格</legend>
</fieldset>

<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" style="height: 100px;">
        <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>卡片风格</legend>
</fieldset>

<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">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
        <div class="layui-tab-item">大数据男孩</div>
    </div>
</div>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element'],function () {

    })
</script>

选项卡的相关动态操作（删除，添加 …） 请看官网