【问题标题】:CSS Tabs Border IssueCSS选项卡边框问题
【发布时间】:2011-08-30 07:45:24
【问题描述】:

我无法确定如何操作某些选项卡的边框

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

您可以看到,对于 onClick 事件,选项卡的背景颜色会更改为应有的白色。

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

border-bottom 应该从灰色变为白色。 左边框和右边框应变为灰色。

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

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

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

【问题讨论】:

    标签: css


    【解决方案1】:

    我只是稍微修改了.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 类并添加到它,您请求在选项卡之间设置边框:

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

    这应该可以解决问题,也许你应该去掉其他选项卡上的边框,如果这是你正在寻找的,因为双边框看起来很时髦。

    如果我能提供更多帮助,请告诉我

    【讨论】:

    • @Brett 我知道 CSS 非常不同,我从示例站点获得了它。在您的帮助和 Sirvivir 的帮助下,我能够让它发挥作用:jsfiddle.net/NinjaSk8ter/ZSeFA 如果您运行它,您是否会在底部看到我缺少的部分?在选项卡按钮之间?
    • @Paul - 我要做的是将一些代码添加到类 left-col 的 div 中,我将把它放在我的答案中
    • @Brett 我还需要修改底部边框吗?正如您所看到的,它跨越所有选项卡,除了被选中的选项卡。
    • @Paul - 这不是你想要的吗?
    • @Brett 我相信成功了。我从 Blue Class 中删除了底部边框,现在它就像你建议的那样在 left-col 类中。谢谢!!
    【解决方案2】:

    例如,让底部边框看起来像这样

    <html>
    <head>
    <style type="text/css">
    p 
    {
    border-style:solid;
    border-bottom-color:white;
    }
    </style>
    </head>
    
    <body>
    <p>This is some text in a paragraph.</p>
    </body>
    
    </html>
    

    【讨论】:

    • @Thomas 我有,正如你在我的小提琴中看到的那样:border-bottom-color:#FFFFFF;边框底部样式:实心;边框底部宽度:1px;
    【解决方案3】:

    您正在进行一些继承。将显式值添加到 .blue 类和 important.white 中的类有效。

    .blue {   
        background-color: #D7DFEA;
        border-bottom: 1px solid #fff;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .white {   
        border-bottom: 1px solid #fff !important;
        border-top: 1px solid #A0AFC3;
        border-left: 1px solid #A0AFC3;
        border-right: 1px solid #A0AFC3;
        background-color: white;
    } 
    

    【讨论】:

    • 你认为删除 .common-heading-tabs a.selected 是否安全
    【解决方案4】:

    据我所知,问题在于,虽然.common-heading-tabs a.white 都应用于链接,但前者是“更具体”的 CSS 类,这意味着浏览器在确定时给予它优先级要应用哪些样式。

    如果您想确保.white 样式覆盖边框,您可以将!important 添加到边框样式:

    .white {   
        background-color: white !important;
        border-bottom-color: #FFFFFF !important;
        border-bottom-style: solid !important;
        border-bottom-width: 1px !important;
        ...
    }
    

    或重新设计类的设备,使冲突的边框样式不适用,例如,这可能意味着将蓝色边框样式从 .common-heading-tabs a 移动到 .blue

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-09-27
      • 2014-05-16
      • 1970-01-01
      • 1970-01-01
      • 2013-09-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多