从活动的 jQuery UI 选项卡中删除大纲？答案

【问题标题】：Remove outline from active jQuery UI tab?从活动的 jQuery UI 选项卡中删除大纲？
【发布时间】：2013-01-03 17:54:38
【问题描述】：

我想删除活动 jQuery UI 选项卡上的轮廓（或至少更改颜色）。

从this example, 工作我尝试了这个没有成功：

<style>
    #tabs .ui-state-focus
    {
        outline: none;
    }
</style>

（基于此question and answer 的提示）。

从活动标签中删除轮廓的技巧是什么？

【问题讨论】：

标签： css jquery-ui jquery-ui-tabs

【解决方案1】：

我认为您需要定位的不是 focus 类，而是 CSS 伪类 :focus

.ui-state-focus:focus { outline:1px dotted red !important }

如果可行，请使用 {outline:none} 将其删除。不过，您有点担心它来提高您的可访问性，仅供参考。

【讨论】：

是的...在结果窗口内单击，然后点击（您应该会在第一个选项卡元素周围看到一条红色虚线）。也许我们在追求不同的问题？
啊，酷，我现在明白了。但是在 mac-chrome 中，单击一个选项卡会在同一选项卡周围放置一个蓝色边框。我正在努力改变这一点。
这与选择器的细粒度有关。使用*:focus { outline:none } 有效，但#tabs ul li a:focus { outline:none; /* outline-color:red */; } 也有效 - 将 CSS 粘贴到您的小提琴中，您会看到。 Mac Lion 和 Chrome 测试
为了证明我上面的陈述，用#tabs ul li a:focus, #tabs ul li:focus 替换你传递给我的小提琴中基于类的“.ui....”选择器。不要更改 CSS。现在，在click/active 和<TAB> 上，曾经模糊的浅蓝色将变为红色虚线。

【解决方案2】：

有很多方法可以做到这一点。这里有两个例子（我建议选项 2）：

选项 1

从所有使用.ui-widget 类的元素中移除轮廓：

.ui-widget * { outline: none; }

这里是a working fiddle。

选项 2

使轮廓颜色透明：

#tabs li a
{
    outline-color: none;
}

这里是a working fiddle。

【讨论】：

在 Mac 上，outline-color:transparent 实际上将颜色从默认的蓝色更改为石墨色。 (OS X Lion + Chrome)
@Dawson，同意。只需替换为outline: none;
这对我有用，因为某种原因接受的答案没有。谢谢！

【解决方案3】：

我设法用

删除了它

.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
     outline:none;
}

【讨论】：

【解决方案4】：

如果您只想删除特定选项卡上的大纲，那么我建议您使用以下方法：

$("#tabs ul li").css({'outline': 'none'}); // where #tabs can be any specific tab group

在你的 html 的 script 标签内。

【讨论】：

恭喜您的第一个答案！请务必查看markdown (message formatting syntax) help page。

【解决方案5】：

您可以通过指定outline-width: 0;来禁用大纲

#tabs li a
{
    outline-width: 0;
}

不使用 ID 的更通用的解决方案是：

.ui-tabs ul li a
{
    outline-width: 0;
}

演示：http://jsfiddle.net/ebCpQ/

【讨论】：

这需要我提前知道 div id。我正在动态创建选项卡式面板（使用自动生成的 ida），所以我相信我必须动态插入 css 才能使用此解决方案？

【解决方案6】：

我也必须这样做以防止可能的初始标签顺序焦点：

.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
    outline:none;
}

【讨论】：

谢谢！这删除了当前焦点选项卡上的蓝色下划线！

【解决方案7】：

你可以试试这个

a:focus { outline: none; }

【讨论】：

【解决方案8】：

为了更清楚，轮廓显示在 ul.ui-tabs li.ui-tabs-nav 内部的元素上。上述大多数示例都忘记提及这一点：所以这是原始问题的有效答案：

.ui-tabs-nav .ui-state-focus a {
    outline: none;
}

http://jsfiddle.net/xJ9Zr/5/

【讨论】：

【解决方案9】：

奇怪的是，这些都不适合我。我必须添加一个边框才能使轮廓（或者它可能是一个蓝色边框）消失：

.ui-state-hover, .ui-state-focus, .ui-state-active
{
    border: 1px solid #ccc !important; /*Or any other color*/
    border-bottom: 0 !important;
}

【讨论】：