CSS 选项卡边框问题

2024-04-13

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

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

您可以看到,对于 onClick 事件,选项卡的背景颜色变为白色,就像它应该的那样。

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

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

同样,当未选择选项卡时: 底部边框应从白色变为灰色。 border-left 和 border-right 不应有边框。

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

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


我刚刚修改了 CSS 类.white有一点,你的 CSS 标记不符合标准:

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

此外,要使底部边框消失,您有两个选择之一,您可以执行以下任一操作

  • 删除底部边框.common-heading-tabs a类并将其添加到.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

希望有帮助!

Edit:

如果您要修改类,您请求在选项卡之间设置边框.left-col并添加到它:

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 选项卡边框问题 的相关文章

  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 背景颜色的不透明度,但不是文本的不透明度[重复]

    这个问题在这里已经有答案了 如何使背景的跨浏览器 包括 Internet Explorer 6 透明div而文本仍然不透明 我需要在不使用任何库 例如 jQuery 等 的情况下完成此操作 但如果您知道有一个库可以实现此目的 我很想知道 这
  • 混合混合模式:乘法在 Chrome 中不起作用

    我正在尝试使用mix blend mode multiply在 Chrome 上 但它无法按预期工作 当我添加时magenta cyan and yellow在一起它不会给我黑色但brown https i stack imgur com
  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • 如何翻转 Twitter Bootstrap 的工具提示

    我正在使用 Twitter 的 Bootstrap 来实现工具提示 目前 工具提示显示在链接上方 我希望工具提示出现在链接下方 我该怎么做呢 我正在触发工具提示 它明确指出 底部 但它不想为我工作 tooltip tooltip place
  • @font-face 字体在 Mac 的 Safari 和 Chrome 中显示模糊

    I m using two special fonts on my website for headings and subtitles They are working fine on a PC in IE Firefox and Chr
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS
  • SELECT 元素中的图像[重复]

    这个问题在这里已经有答案了 我知道如何使用 CSS 背景图像属性让图片显示在 HTML 下拉表单元素中的选项旁边 但是 图像不会显示在所选元素上 有什么方法可以做到这一点 最好只使用CSS EDIT 这是列表元素的工作代码的示例 但是 当下
  • :target 伪类在 Firefox 中无法正常工作

    我正在使用 target 伪类制作一个具有 CSS 灯箱类型效果的页面 当您单击图像时 会弹出一个包含信息的框 当您单击任意位置时 该框会再次消失 它在 Chrome 和 IE 中运行良好 但在 Firefox 中存在一个奇怪的错误当您将鼠
  • 基本 CSS 问题 - 父 DIV 与未知子 DIV、居中父 DIV

    当我将 DIV 居中时 我会给它一个宽度并放置margin auto然而 我对这种情况有两个问题 该父 DIV 内将有 2 或 3 个带有 float left 的 DIV 子 DIVS 的宽度不会改变 但数量可能会改变 2 或 3 因此
  • JavaFX 中的 -fx-background-radius 和 -fx-background-insets

    我正在使用 JavaFX 我想自定义一个按钮 我看到了几个可以设计的特征 其中我发现了两个我不认识的人 button fx padding 5 22 5 22 fx border color 121212 fx border width 2
  • Twitter 的 Bootstrap 是否像 Skeleton 一样适合移动设备?

    骨架经过缩放以适应移动浏览器 遵循以下原则响应式网页设计 http www abookapart com products responsive web design Bootstrap 提供同样的功能吗 还没有 http groups g
  • ReactJS 水平对齐material-ui 元素

    我试图在文本输入旁边有一个单选按钮 这样用户基本上可以输入问题的 答案 并标记一个首选答案 然而 Material UI 将每个都放在自己的行上 这就是我目前所拥有的 div div
  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a
  • 如何在 Bootstrap 4 中垂直对齐?

    我试图在 Bootstrap 4 4 0 0 alpha 6 中将我的大屏幕的内容垂直对齐在中心 在 Mac 桌面上的 Chrome 和 Safari 中 这种情况发生得很好 但在我的 iOS 设备上则不然 文本仍然与顶部对齐 我强制大屏幕
  • 底部页脚的 css 布局,动态 ajax 内容更改页面高度

    Update 实际上 我现在通过放弃固定页脚设计来解决这个问题 动态内容移动页脚并适当调整容器大小似乎没有问题 除非页脚最初固定在浏览器底部 我希望其他人最终能够提供一个兼具两全其美的出色解决方案 I spent all day tryin
  • CSS:如何在模糊的背景上剪切文本?

    我想重新创建以下样式 我想出了以下内容 问题是剪切不会影响模糊滤镜 我不知道如何解决它 这是我的 HTML 代码 glass width 40 height 100 position absolute background rgba 255
  • MVC4 捆绑:由于 css3 功能而缩小失败?

    我想使用 MVC4 捆绑和缩小 但我总是在未缩小的 css 文件中收到此错误消息作为注释 Minification failed Returning unminified contents 534 29 run time error CSS
  • 如何仅突出显示嵌套表的最里面的表行?

    我有几个嵌套表 我想突出显示鼠标指针下方的最里面的行 我怎样才能做到这一点 一些提示 我使用嵌套表来显示递归表格数据 表可以嵌套 10 层 嵌套正如您所期望的那样 table tr td table tr td table tr td 可能

随机推荐

  • URL 重写 - 多个查询

    我想看看如何实现以下重写规则 From https localhost site page place place west https localhost site page location location cityname To h
  • 下载控制板软件模拟器

    我有兴趣学习如何用 c 进行嵌入式系统编程 但是 我需要一些硬件 我想知道有什么软件可以模拟控制板的功能吗 控制板在下面的教程中列出 http www learn c com hardware htm http www learn c co
  • 如何检查 db sqlite xamarin iOS 中是否存在表

    如何检查表的创建位置db数据库与否 var folder Environment GetFolderPath Environment SpecialFolder Personal SQLiteConnection db new SQLite
  • 如何在C++中创建地图函数?

    假设有一个整数列表 1 2 3 4 5 和一个映射函数 它将每个元素乘以 10 并返回修改后的列表为 10 20 30 40 50 而不修改原始列表列表 如何在 C 中有效地完成此操作 这是一个例子 include
  • 在 REBOL 中动态添加单词到上下文

    想象一下以下 REBOL 代码 foo context bar 3 我现在有一个上下文foo其中 bar被定义为 如何动态地将新单词注入到此上下文中 是否可以 我试过了 set any in foo baz 3 但这不起作用 因为表达式in
  • 时间:2019-03-17 标签:c#datetimeformat

    我希望根据当前的文化为我的日期时间设置特定的格式 所以我尝试这个 dateTime ToString dd MM yyyy hh mm 这部分是可以的 被特定于区域性的分隔符替换 但日和月的顺序不会根据文化而改变 如 MM dd Using
  • 将日期转换为Mysql日期格式php

    我的数据库中有这个日期格式 19th April 2013 我想将其转换为 2013 04 19 我已经使用了 if else 条件 但是它变得太长太复杂 有没有内置函数 Use PHP s date功能 date Y m d strtot
  • 基于“file:///C:/”的访问不允许 navigator.geolocation.getCurrentPosition [重复]

    这个问题在这里已经有答案了 可能的重复 Chrome 中的 HTML5 地理位置提示 https stackoverflow com questions 5423938 html 5 geo location prompt in chrom
  • 我可以实例化 std::reference_wrapper (其中 T 是不完整类型)吗?

    Does std reference wrapper
  • 为什么 [用户名].github.io 上的 GitHub 页面不会显示?

    我创建了 repo username github io 在 gh pages 分支中推送了第一次提交 等待了 30 分钟 GitHub 说 不应该超过 10 分钟 并在尝试加载我的页面时遇到 404 页面 用不同的浏览器查看 结果都是一样
  • 在 Mac App Store 的 Electron 应用程序中实现应用内购买

    我环顾四周 似乎有几个人遇到这个问题 但似乎没有人解决它 将 Apple 应用内购买添加到 Electron HTML JS 应用程序 https stackoverflow com questions 39841666 adding ap
  • OpenAPI V3 Maven Plugin使用multipart/form-data生成多文件上传的不完整接口代码

    我使用 Openapi V3 和 Maven 插件 openapi generator maven plugin 5 3 0 来使用 multipart form data 上传多个文件 但是 生成的接口代码不完整 在默认方法之一中缺少 L
  • 如何用通俗语言解释CSS Float?

    如何用通用语言 而不是编程 解释CSS Float 有没有现实生活中的例子可以举个例子来解释CSS Float 有没有以非常简单的方式解释浮动的幻灯片 就像听起来一样解释它 之所以称为 浮动 是因为元素像船一样 漂浮 考虑内容的其余部分是水
  • LINQ to SQL:存储过程结果

    如何更改 LINQ to SQL 设计器生成的存储过程结果的类名 除了弄乱 Designer cs 之外 另外 如何对存储过程的结果集执行 linq 查询 您可以在 dbml 中编辑它吗 就我个人而言 我倾向于将自动生成的类型 来自函数和存
  • 使用 Pandas 为来自多个 URL 的多个 CSV 文件创建一个数据框

    我想使用来自 URL 的多个 CSV 文件的 Pandas 创建 1 个数据框 结构 并保留初始标题行 使用单个 URL 一切都会按预期工作 df pd read csv http www URL1 csv 我已尝试使用多个 URL 进行以
  • JMeter 中的周期性后台任务

    我的测试计划中的请求使用授权令牌 我知道该令牌将在 1 小时内过期 我需要以某种方式每 59 分钟重新请求一次令牌 直到测试完成 有人可以建议最好的方法吗 看起来使用 While 控制器测试将永远不会完成并停留在永恒的 while 循环中
  • 在控制台中显示完整的 Git 提交消息

    我正在尝试在控制台中输出完整的提交消息 并且我能够获取该消息 但是为了查看完整的消息 我必须不断调整控制台窗口的大小以显示更多信息 我在 Windows 上使用 Cygwin 我正在使用的命令是git log pretty full 寻呼机
  • PHP 缺少 mb_strpos 函数?

    我收到此错误 PHP Fatal error Call to undefined function mb strpos in my file php 这很奇怪 因为mb strpos http us php net manual en fu
  • 使用 javascript 或 jquery 的几何(卷积)函数

    我尝试这样做 3 个月 我需要按路线方向创建一个多边形 如下所示 所以我写这个 directionService route request function result status if status google maps Dire
  • CSS 选项卡边框问题

    我无法确定如何操作某些选项卡的边框 如果您已登录 您可以在 ASP NET 上看到该功能http forums asp net user editprofile aspx http forums asp net user editprofi