html - 合并外部 div 与内部 div 和内部 div 边框事件

Question

我使用 div 创建一个选项卡 View 。当其中一个选项卡处于事件状态时，我想隐藏外部 div 底部边框，以便我看到选项卡已被选中。

但现在我看到外部 div 底部边框，它不像图像中那样好。

期望的输出:

我的 div 是这样放置的:

<div class='clsTabContainer'>
    <div class='clsCurrentTab'>Dashboard</div>
    <div class='clsTab'>Leads</div>
    <div class='clsTab'>Internet</div>
    <div class='clsTab'>Tasks</div>
</div>

.clsTabContainer {
    BACKGROUND-COLOR: #FFFFFF;
    PADDING-LEFT: 0px;
    WIDTH: 100%;
    PADDING-RIGHT: 0px;
    WHITE-SPACE: nowrap;
    HEIGHT: 35px;
    OVERFLOW: hidden;
    PADDING-TOP: 3px;  
    border-bottom: #D0D0D0 1px solid;
}

.clsTab {
    OVERFLOW-X: visible;
    OVERFLOW-Y: hidden;
    BACKGROUND-COLOR: #F0F0F0;
    DISPLAY: inline-block;
    WHITE-SPACE: nowrap;
    HEIGHT: 100%;
    FONT-SIZE: 10pt;
    VERTICAL-ALIGN: middle;
    CURSOR: pointer;    
    padding: 5px 10px 10px 10px;
    margin-left: -1px;
    border-left: #D0D0D0 1px solid;
    border-right: #D0D0D0 1px solid;
    border-top: #D0D0D0 1px solid;
}

.clsCurrentTab {
    OVERFLOW-X: visible;
    OVERFLOW-Y: hidden;
    BACKGROUND-COLOR: #FFFFFF;
    DISPLAY: inline-block;
    WHITE-SPACE: nowrap;
    HEIGHT: 100%;
    FONT-SIZE: 10pt;
    VERTICAL-ALIGN: middle;
    CURSOR: pointer;    
    padding: 5px 10px 10px 10px;
    margin-left: -1px;
    border-left: #D0D0D0 1px solid;
    border-right: #D0D0D0 1px solid;
    border-top: #82C600 1px solid;
    color: #82C600;
}

如何避免所选 div 上的外部 div 边框底部，以便我看到相应的选项卡看起来真的被选中了。？

Answer 1

以下是当前 css 的更改以实现此目的:

.clsTab {
    height:19px;
}
.clsCurrentTab {
    height:20px;
}
.clsTab,.clsCurrentTab {
    vertical-align: top;
}

从 .clsTabContainer 中移除 overflow:hidden。

See DEMO here.