CSS标签边框问题 [英] CSS Tabs Border Issue

问题描述

我有一个问题，决定如何操纵边界的一些标签

Im having a problem to determine how to manipulate the Borders for some Tabs

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

You can see the functionality here on ASP.NET if you are logged-in http://forums.asp.net/user/editprofile.aspx#

你可以看到一个onClick事件的Tab的背景颜色变成白色，它的应该。

You can see for an onClick Event the background-color of the Tab changes to white like its supposed to.

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

The problem that Im having has to do with the Borders for onClick:

边框底部应该更改从灰色到白色。
边框左边和边框右边应该变成灰色。

The border-bottom should change from the grey color to white. The border-left and the border-right should change to the grey color.

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

Likewise when a Tab is not selected: The border-bottom should change to the grey color from white. The border-left and border-right should not have a border.

在我的CSS中，Im使用蓝色和白色类的JavaScript。但我也有：.common-heading-tabs a.selected，这让我很困惑。

In my CSS, Im using both the blue and white class for the JavaScript. However I also have: .common-heading-tabs a.selected and this is confusing me.

这是我的小提琴 - 如果有人可以帮助这将是巨大的
http://jsfiddle.net/NinjaSk8ter/ZSeFA/

Here is my Fiddle- if someone could help It would be great http://jsfiddle.net/NinjaSk8ter/ZSeFA/

推荐答案

我刚刚修改了 .white 的CSS类，一点点，你的CSS标记不是标准：

I just modified the CSS class for .white a little bit, your CSS mark-up was not the standard:

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

此外，为了让底边框消失，您有两个选项之一，从 .common-heading-tabs a

Additionally, to get the bottom border to go away, you have one of two options, you could do one of either

之一> class并将其添加到 .blue 类

• 添加 border-bottom-color：white！important ; 到 .white 类



• remove the bottom border from the .common-heading-tabs a class and add it to the .blue class
• add border-bottom-color:white !important; to the .white class

原因是你看到的是你的行为，因为标准选项卡有一个边框（ .common-heading-tabs a ），当你切换到白色，你尝试改变颜色或一些边框，但你使用 border-left-color-value ，而不是简单地 border-left-color ，然后你没有修改白色类选项卡底部的边框，因此要移动底部边界声明 .common-heading-tabs a 或明确着色 bottom-border-color：white！important

The reason that you were seeing the behavior that you were was because the standard tab had a border (from .common-heading-tabs a), and when you switched to white, you tried to change the color or some of the borders, but you used border-left-color-value rather than simply border-left-color, and then you didn't modify the border on the bottom on the tab for the white class, hence either moving the bottom border declaration out of .common-heading-tabs a or explicitly coloring the bottom-border-color:white !important

希望有帮助！

编辑：

您请求在标签页之间插入边框您要修改 .left-col 类并添加它：

You requested having a border run between the tabs, if you were to modify the class .left-col and add to it:

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

这应该做的窍门，也许你应该摆脱

That should do the trick, maybe you should get rid of the borders on the other tabs, if this is what you're looking for, because the double border looks funky.

如果我可以再提供帮助，请告诉我

Let me know if I can help any more

这篇关于CSS标签边框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！