Javascript Jquery垂直选项卡未知间隙和对齐方式

这项工作已经进行了一段时间，但似乎无法使其正常工作

首先，标签和内容之间有一个间隙，我不确定如何在不使右侧更左侧的情况下进行修复

其次，标签本身在连接到内容区域时存在问题。我现在有标签左：-80px以便将它们移出内容区域。但是，根据用户浏览器的总屏幕大小大小，这样做似乎会导致一个问题

如果有人能帮我解决这个问题，那就太好了

我已经为你做了一个测试

var tabTitles=[“第一个选项卡”、“第二个选项卡”、“第三个选项卡”、“第四个选项卡”、“第五个选项卡”、“第六个选项卡”]；
$（“.tabHeader”）。单击（函数（）{
$（“.tabHeader”）.removeClass（“活动”）；
var position=$（this.position（）；
var top=position.top；
$（“.active”）.css（“top”，top）；
$（此）.addClass（“活动”）；
var text=$（this.text（）.trim（）；
开关（文本）{
案例“表1”：
$（“.tabTitle”）.text（tabTitles[0]）；
打破
案例“表2”：
$（“.tabTitle”）.text（tabTitles[1]）；
打破
案例“表3”：
console.log（'yo'）；
//$（'.textBody'）.html（'TEST！'）；
$（“.textBody”）.load（“https://raw.githubusercontent.com/jiahaog/ajax-test-page/master/index.html，函数（响应文本、状态文本、xhr）{
});
$（“.tabTitle”）.text（tabTitles[2]）；
打破
案例“表4”：
$（“.tabTitle”）.text（tabTitles[3]）；
打破
案例“表5”：
$（“.tabTitle”）.text（tabTitles[4]）；
打破
案例“表6”：
$（“.tabTitle”）.text（tabTitles[5]）；
打破
违约：
$（“.tabTitle”）.text（“选择选项卡”）；
打破
}
});
正文{
背景色：白色；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
字体大小：12px；
}
.卡片{
显示器：flex；
弯曲方向：行；
背景色：白色；
保证金：0自动；
边缘顶部：10px；
宽度：85%；
身高：100%；
盒影：1px2px6px#d3d3；
边界半径：4px；
}
.tabHeader{
宽度：80px；
高度：50px；
背景色：#47bc8b；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
}
.垂直标签{
位置：相对位置；
左：-80px；
右：0px；
显示：表格单元格；
}
.主动{
位置：相对位置；
z指数：50；
宽度：80px；
高度：50px；
背景色：#259162；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
}
.tabText{
位置：绝对位置；
颜色：白色；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
字体大小：12px；
边缘顶部：16px；
左边距：23px；
}
.textHolder{
利润率：10px；
文本对齐：对齐；
溢出：滚动；
溢出x：隐藏；
宽度：100%；
}
.tabTitle{
字体大小：20px；
字号：600；
填充：0 20px 0；
}

表1
表2
表3
表4
表5
表6
第一选项卡
您真正需要做的就是将
边框半径
和
框阴影
从
.card
移动到
.textHolder
，然后您可以从
.verticalTabs
移除定位，而不是使用
边距
将
.card
与
.textHolder
分开，使用
填充


var tabTitles=[“第一个选项卡”、“第二个选项卡”、“第三个选项卡”、“第四个选项卡”、“第五个选项卡”、“第六个选项卡”]；
$（“.tabHeader”）。单击（函数（）{
$（“.tabHeader”）.removeClass（“活动”）；
var position=$（this.position（）；
var top=position.top；
$（“.active”）.css（“top”，top）；
$（此）.addClass（“活动”）；
var text=$（this.text（）.trim（）；
开关（文本）{
案例“表1”：
$（“.tabTitle”）.text（tabTitles[0]）；
打破
案例“表2”：
$（“.tabTitle”）.text（tabTitles[1]）；
打破
案例“表3”：
console.log（'yo'）；
//$（'.textBody'）.html（'TEST！'）；
$（“.textBody”）.load（“https://raw.githubusercontent.com/jiahaog/ajax-test-page/master/index.html，函数（响应文本、状态文本、xhr）{
});
$（“.tabTitle”）.text（tabTitles[2]）；
打破
案例“表4”：
$（“.tabTitle”）.text（tabTitles[3]）；
打破
案例“表5”：
$（“.tabTitle”）.text（tabTitles[4]）；
打破
案例“表6”：
$（“.tabTitle”）.text（tabTitles[5]）；
打破
违约：
$（“.tabTitle”）.text（“选择选项卡”）；
打破
}
});
正文{
背景色：白色；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
字体大小：12px；
}
.卡片{
显示器：flex；
弯曲方向：行；
背景色：白色；
保证金：0自动；
边缘顶部：10px；
宽度：85%；
身高：100%；
}
.tabHeader{
宽度：80px；
高度：50px；
背景色：#47bc8b；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
}
.垂直标签{
位置：相对位置；
显示：表格单元格；
}
.主动{
位置：相对位置；
z指数：50；
宽度：80px；
高度：50px；
背景色：#259162；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
}
.tabText{
位置：绝对位置；
颜色：白色；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
字体大小：12px；
边缘顶部：16px；
左边距：23px；
}
.textHolder{
填充：10px；
文本对齐：对齐；
溢出：滚动；
溢出x：隐藏；
宽度：100%；
盒影：1px2px6px#d3d3；
边界半径：4px；
}
.tabTitle{
字体大小：20px；
字号：600；
填充：0 20px 0；
}

表1
表2
表3
表4
表5
表6
第一选项卡
这是否解决了