如何去掉element-ui中，tabs中el-tab-pane切换时的下划线

最新推荐文章于 2024-05-31 22:15:00 发布
置顶 最新推荐文章于 2024-05-31 22:15:00 发布
阅读量1.2w 收藏 7
点赞数 6
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NeverGiveUp_Up/article/details/106018654
版权

类似这里的下划线，由于设置了背景颜色切换时有差异不好看，就想办法去掉了。

找到  .el-tabs__active-bar 属性然后覆盖掉就行了

/*tabs 去掉el-tab-pane切换时的蓝色下划线*/
.el-tabs__active-bar {
  background-color: transparent !important;
}

这个是使用element-ui框架的属性，如果是其他框架应该也可以找到相应属性然后进行覆盖。

大家觉得有用的话点个赞呗

花重锦
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue3 - Element Plus 标签页 Tabs 去掉底部灰色线条下划线，隐藏 el-tabs / el-tab-pane 选项卡下面一条很长的线条（完美去除 tab 标签页组件下方的灰线条）
王佳斌
08-11 6559
element plus 如何去掉el-tabs标签页下方很长的一条线，vue3 element plus 去掉el-tabs标签页底部黑色线，element-plus标签页下划线去除，去除element plus中tab组件中的下划线，清除vue3 elementplus标签页下划线，element plus去掉tabs选项卡底部黑色线，vue3 el-tabs去掉底部的下划线，el-tab-pane下面有灰色线条怎么清除掉，vue3 element plus如何去除tabs选项卡的灰色下划线，vue3标
解决Vue对Element中的el-tab-pane添加@click事件无效
06-06
解决Vue对Element中的el-tab-pane添加@click事件无效
＜el-tabs＞改变样式（去掉下划线及其他样式）
愤怒的阿木木的博客
03-31 5765
elemen-ui官方文档中给的标签页是蓝色的，长这样 我想要的样子： 这里重点是去掉原来的下划线以及鼠标悬停时的背景颜色，话不多说直接上代码： <div class="leftTabs"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" > <el-tab-pane label="全部" name="first" >全部&l
使用el-tab，el-tab-pane循环使用循环后不显示下划线问题
最新发布
G佳伟
05-31 485
在vue项目中使用element-UI el-tab里的el-tab-pane是循环出来的，但是循环出来后选中tab不显示下划线了。
element中 el-tabs 去掉底部的下划线和切换时的下划线
qq_42931285的博客
10-10 3282
element中 el-tabs 去掉底部的下划线和切换时的下划线
【Element】element el-tabs 去掉底部的下划线和切换时的下划线
毛毛的博客
09-27 2030
【Element】element el-tabs 去掉底部的下划线和切换时的下划线。
el-tab-pane 去掉下边的横线和点击是出现的横线
weixin_56381842的博客
12-09 631
el-tab-pane 去掉下边的横线和点击是出现的横线
解决vue中el-tab-pane切换的问题
10-15
在Vue开发过程中，Element UI库提供了丰富的UI组件，其中`el-tabs`组件用于实现标签页切换功能。在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
在Vue.js中，`el-tab-pane` 是 Element UI 框架中的一个组件，用于创建选项卡式布局。然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是...
手动动态改变el-tabs标签页顺序
06-28
例如：tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4（往后移）则顺序变为tabs1、tabs3、tabs4、tabs2； tabs4改为tabs2（往前移） 则顺序变为tabs1、tabs4、tabs2、tabs3。
elementui el-tabs 去掉底部的下划线和切换时的下划线
m0_46340177的博客
07-23 1017
/去掉切换时el-tab-pane底部的下划线。//去掉tabs底部的下划线。
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
11-20
现象： 解决方法 ： 1.修改全局css 2.只修改局部css .你的tableClass{ /deep/ .el-table__fixed { height: 100% !important; //设置高优先，以覆盖内联样式 } } 补充知识：解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题 在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。 如上图所示，现在表格下方是未出现水平滚动条的，处
一行代码 去掉 element-plus 的 el-table 下划线
gujuyin的博客
03-07 609
一行代码 去掉 element-plus 的 el-table 下划线
el-table 去掉最下面的白线
绿葡萄的博客
05-31 1167
.parent .el-table::before{ background-color: transparent; }
解决vue elementUI el-tabs默认选项下划线不显示的问题
u010234868的专栏
05-07 669
【代码】解决vue elementUI el-tabs默认选项下划线不显示的问题。
el-table去掉每行底部自带的横线
weixin_43479662的博客
06-07 1079
问题el-table每行都有自带的横线，但是业务并不需要。
导航栏css去下划线的代码,纯css导航栏下划线
weixin_29014237的博客
08-04 1438
.nav-underline > *{/* 指定容器，里面可以是li、span等多样化的元素 */display: inline-block;margin: -3px;padding: 10px 15px;position: relative;cursor: pointer;}.nav-underline > *::before {/* 通过伪元素实现下划线效果 */content: ...
TabLayout下划线与文本长度相等
ToOak_And的博客
04-03 1631
从网上搜到的实现：public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVie...
element-ui中tabs标签页背景色修改
08-26
要修改element-ui中tabs标签页的背景色，可以通过CSS样式来实现。 首先，需要为标签页设置一个自定义的类名，可以通过`tab-class`属性来指定，例如`<el-tabs tab-class="my-tabs">`。 然后，可以在CSS中定义`.my-...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值