html - 如何为边框底部设置 CSS

Question

问题是

.sppb-nav-tabs {
        border-bottom: 1px solid #e5e5e5}

在我的 CSS 中工作不正确。我将 CSS 的这一部分用于网页上的选项卡，我希望它们看起来像现在一样。但是，当您在选项卡之间切换时，例如从选项卡 1 转到选项卡 2，border-bottom: 1px solid #e5e5e5 仍然存在于所选选项卡下，直到您单击内容的某个地方。只有在点击标签 border-bottom-color: transparent; 之外的某个地方后才会产生影响。我尝试了不同的解决方案但没有成功。仅通过删除 border-bottom: 1px solid #e5e5e5 问题得到解决，但根本没有线。有什么想法可以解决这个问题吗？

.sppb-nav-tabs {
    border-bottom: 1px solid #e5e5e5}
.sppb-tab-content {
    margin-top: 15px}
.sppb-nav-tabs-content {
    margin-top: 0;
    border-left: 1px solid #e5e5e5;
    background: #fff;
    border-top: 0;
    padding: 15px}
.sppb-nav-tabs>li {
    float: left;
    margin-bottom: -1px}
.sppb-nav-tabs>li>a {
    font-size: 14px;
    font-weight: bolder;
    line-height: 1.42857143;
    padding: 12px 15px;
    background: #f5f5f5;
    color: inherit;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    border-right-width: 1px}
.sppb-nav-tabs>li: last-child>a {
    border-right-width: 1px}
.sppb-nav-tabs>li>a>i {
    margin-right: 5px}
.sppb-nav-tabs>li.active>a,.sppb-nav-tabs>li.active>a:focus,.sppb-nav-tabs>li.active>a:hover {
    color: inherit;
    background-color: #fff;
    border-bottom-color: transparent;
    cursor: default}

Answer 1

另一种解决问题的方法是编辑选择器的 bottom-border-color 属性(在 sppagebuilder.css 的第 1890 行)

.sppb-nav-tabs>li.active>a,.sppb-nav-tabs>li.active>a:focus,.sppb-nav-tabs>li.active>a:hover

您需要将 border-bottom-color: transparent; 替换为 border-bottom-color: #fff;