1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > react+antd中的tab页组件修改选中的tab样式

react+antd中的tab页组件修改选中的tab样式

时间:2024-01-27 00:12:16

相关推荐

react+antd中的tab页组件修改选中的tab样式

原图

效果图

思路:tab有增删,我这里是根据目录显示tab标签有选中同一个的,其实tab本身的切换也算选中同一个,

1、删除某个的时候,activeKey变得同时,样式也要跟着变,不管是有顺序的删除还是无序的删除

2、新增的时候,我这里的数据结构是都在最后一个加新数据,如果不是选中同一个,都是默认显示新增的数据的tab标签,也可以放最前面

3、我这里是根据组件的className来判断的,获取到所有的标签document.getElementsByClassName('ant-tabs-tab')节点

4、循环遍历的时候根据是否是当前选中的和没选中的来进行样式赋值,react中,我试了一下,目前就这种方式支持,我添加class,都不成功,可能是class的权重问题

//修改tab选中的颜色setActiveColor = ()=>{let otherTab = document.getElementsByClassName('ant-tabs-tab');//包含了当前的activefor (let j in otherTab){if (otherTab.hasOwnProperty(j)){let i = otherTab[j]if (i.className.includes('ant-tabs-tab-active')){//当前点击的i.style.backgroundColor = '#E03D3E';i.style.color = '#fff'}else {//其他默认的样式i.style.backgroundColor = '#fafafa';i.style.color = 'rgba(0, 0, 0, 0.65)'}}}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。