css - CSS标签边框问题

我在确定如何操纵某些选项卡的边框时遇到问题



如果您登录http://forums.asp.net/user/editprofile.aspx#，则可以在ASP.NET上看到此功能。

对于onClick事件，您可以看到Tab的背景颜色像应有的那样变为白色。

我与onClick的边框有关的问题是：

边框底部应从灰色更改为白色。
左边框和右边框应更改为灰色。

同样，当未选择选项卡时：
边框底部应从白色变为灰色。
左边框和右边框不应有边框。

在我的CSS中，我同时将blue和white类用于JavaScript。但是我也有：.common-heading-tabs a.selected，这让我感到困惑。

这是我的小提琴-如果有人可以帮忙，那就太好了
http://jsfiddle.net/NinjaSk8ter/ZSeFA/

最佳答案

我只是为.white修改了CSS类，您的CSS标记不是标准的：

border-left-color: #A0AFC3;
border-left-style: solid;
border-left-width: 1px;

此外，要使底部边框消失，可以使用以下两种方法之一，您可以选择其中一种


从.common-heading-tabs a类中删除底部边框并将其添加到.blue类中
将border-bottom-color:white !important;添加到.white类


之所以看到您的行为，是因为标准选项卡带有边框（来自.common-heading-tabs a），并且当您切换为白色时，您尝试更改颜色或某些边框，但是您使用了而不是简单地border-left-color-value，然后您没有修改白色类的选项卡底部的边框，因此将底部边框声明移出border-left-color或显式地为.common-heading-tabs a着色

希望有帮助！

编辑：

如果要修改类bottom-border-color:white !important并将其添加到其中，则要求在选项卡之间使用边框：

.left-col
{
 border-bottom-color: black;
 border-bottom-width: 1px;
 border-bottom-style: solid;
}

这应该可以解决问题，也许这就是您要查找的其他选项卡上的边框，因为双边框看起来很时髦。

让我知道是否能再提供帮助

关于css - CSS标签边框问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6083513/