JQuery UI选项卡 - 透明背景

Question

我无法将jqueryUI标签设置为具有透明背景。我拿了basic tabs example并添加了以下代码，如建议的那样here，但尝试设置透明背景：

body { background: #ddddff; }
.ui-tabs, .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-panel,
.ui-widget-header .ui-state-default,
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active
{
        background: transparent;
}

问题是，活动标签的导航小部件中有剩余行（border-bottom）：

我还尝试按照here设置background-image: none，但它没有帮助。

我有jquery-ui 1.10.3，测试主题为“smoothnes”。

Answer 1

您看到的边框是ul元素与此类.ui-widget-header的边框。用于提供隐藏边框的活动选项卡的视觉效果，其背景和属性：

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

由于您的有效标签不再具有背景，因此无法隐藏边框。

Answer 2

尝试background: rgba(0,0,0,0);并查看是否有任何区别？

你能设置一个小提琴吗？

Answer 3

简单。在发布的CSS之后立即添加以下类：

.ui-widget-header {
    border-bottom:0;
}

---

<强>更新

以上代码将删除导航的整个边框底部，这不是我们想要的。 jQuery使用活动选项卡的类背景来覆盖（或隐藏）其下面的边框，从而产生与其下面的内容相互作用的效果。

由于我们的背景设置为transparent，我认为不可能隐藏jQuery UI如何构建这些标签的底部边框。相反，我们会看到一个裸线框。

我建议使用另一种显示标签内容的方法，而不是使用jQuery UI的库。

Answer 4

知道了！只需将transparent更改为inherit即可！这是一招！

.ui-tabs, .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-panel,
.ui-widget-header .ui-state-default,
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active
{
        background: inherit;
}

将它放在以下元素中就足够了：

.ui-tabs,
.ui-widget-header,
.ui-widget-header .ui-state-default,
.ui-widget-header .ui-state-active
{
        background: inherit;
}

问题是 - 不是很脏吗？它是跨浏览器安全吗？