按钮式tab选项卡

最新推荐文章于 2025-04-20 00:55:32 发布

原创最新推荐文章于 2025-04-20 00:55:32 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

MVC 专栏收录该内容

25 篇文章

订阅专栏

博客介绍了使用layui实现按钮式tab选项卡的方法。由于layui本身没有该类型选项卡，需调整其css样式。还提到可通过加layui-tab-brief设定简洁风格，且不需要外边框。

用layui实现按钮式的tab选项卡
因为layui里没有按钮式的tab选项卡，所以需要调layui的css里的样式，让我们实现按钮式的tab选项卡
不需要外边框，加layui-tab-brief设定简洁风格

@* tab 选项卡 *@
<div class="col">
   <div class="layui-tab layui-tab-brief">
		<ul class="layui-tab-title">
			<li class="layui-this">【1】</li>
			<li>【2】</li>
			<li>【3】</li>
			<li>【4】</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 class="layui-tab-item">4</div>
		</div>
	 </div>
</div>

在这里插入图片描述

没有改改样式的效果
在这里插入图片描述

/*tab 选项卡*/
//去掉下边长灰色线
.layui-tab-title {
	border: none;
}

//给tab选项加背景颜色，5个像素的圆角，每个选项隔开，字体为白式
.layui-tab-title li {
	background-color: #5cb85c;
 	border-radius: 5px; 
	margin-left: 10px;
	color: white;
}

//去选中选项的下边线
.layui-tab-brief > .layui-tab-title .layui-this:after {
	border: none;
}

//选中后，背景颜色改变，5个像素的圆角
.layui-tab-title .layui-this {
	background-color: #f0ad4e;
	border-radius: 5px;
}

//选中后，字体为白色
.layui-tab-brief > .layui-tab-title .layui-this {
	color: white;
}

//改变后
在这里插入图片描述