<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>
layui纵向tab页的实现
最新推荐文章于 2023-07-13 12:57:10 发布