tab切换应该是显示对应的内容,tab页组件得封装是切换tab的时候,内容是visibility方式隐藏改为display方式隐藏,导致切换tab,但是之前的tab的内容还占着文档流位置,把当前的内容几道下面去了,效果图如下:不相互影响布局
思路:获取所有的tab对应的内容,然后循环遍历的时候单独判断是否是当前选中tab对应的内容,不是当前的就换为display方式隐藏,不占正常的文档流位置
代码参考:
//获取所有tab对应的内容
setActiveContent = ()=>{
let allDom = document.getElementsByClassName('ant-tabs-tabpane');
for (let j in allDom){
if (allDom.hasOwnProperty(j)){
let i = allDom[j];
if (i.className.includes('ant-tabs-tabpane-active')){//当前显示的内容
i.style.display = 'block';
}
else {
i.style.display = 'none';
}
}
}
}