LAYUI框架的选项卡
时间: 2023-07-06 17:05:56 浏览: 102
框架选项卡,框架选项卡
LAYUI框架提供了Tab选项卡组件,可以方便地实现选项卡功能。以下是一个基本的选项卡示例:
```html
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</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>
</div>
```
其中,`.layui-tab` 表示选项卡容器,`.layui-tab-card` 表示选项卡风格为卡片式。`.layui-tab-title` 表示选项卡标题容器,`.layui-tab-item` 表示选项卡内容容器。`.layui-this` 类表示当前选中的选项卡。
如果需要自定义选项卡的样式,可以通过修改 CSS 样式来实现。例如,可以修改 `.layui-tab-title` 的背景色、字体大小等样式。
阅读全文