2

我正在尝试将jQuery UI 选项卡设置为垂直选项卡，但与它们提供的垂直选项卡演示的样式略有不同。

我正在努力实现这一目标：

我想要的是

但我能得到的最好的是：

我最好的尝试

您会注意到选项卡底部边框的颜色与文本颜色相匹配，但我真的希望边框在整个选项卡周围保持一致。

我可以像这样添加一个css行：

.ui-tabs-vertical > .ui-tabs-nav li {
    border-bottom-color: #C5DBEC !important;
}

但是我不想硬编码任何颜色，因为它们是由 jQuery UI 主题滚轮提供的，所以如果我决定更改主题，或者为我的网站的不同品牌设置不同的主题，那么这将成为一场噩梦维持。

更深入地研究这个问题，标准的 jQuery UI 主题 css 似乎是这样做的：

.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }

这是因为整个东西都是为水平选项卡正常设置的，需要移除底部边框。我无法删除它，因为它是生成的主题滚轮 css 的一部分。我不认为这应该改变border-color 属性，因为只指定了速记边框的前两个（即宽度和样式）。所以我希望边框颜色不会在这里被覆盖，但实际上它是，并且它正在将它设置为字体颜色。

我为尝试还原此 css 行所做的是：

.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }

再次注意，我没有在这里触及边框底部颜色。

这个结果，至少在 Firefox 中，是取自 firebug 的：

萤火虫捕获

出于某种原因，看起来颜色被设置回默认浏览器颜色，即使没有触及边框底部颜色。我只希望 .ui-widget-content .ui-state-default 中的颜色通过，但我不知道该怎么做。

使用继承不起作用，因为我不想从 DOM 中的父元素中获取颜色。

这是一个jsFiddle 显示我的问题。任何人都可以帮助我获得可维护的解决方案吗？

4

2 回答 2

1

使用@hexblot的答案并动态获取颜色。

为此，请创建一个人造项目，应用您想要的 jQuery 类，然后使用它.css()来获取颜色。就那么简单。

+1 试图找到一个干净的解决方案，没有硬编码的东西。

于 2014-03-07T18:20:05.613 回答
0

只需添加

.ui-state-active { color: #2E6E9E !important; }

你应该没事。用 CSS 中的这一行（最后一行）更新了小提琴。

于 2013-02-20T11:51:02.353 回答