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

Question

我想在活动的jQuery UI选项卡上删除大纲（或者至少更改颜色）。

从this example,开始工作我尝试了这个失败：

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

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

从活动标签中删除大纲的诀窍是什么？

Answer 1

我不相信你需要定位的是focus类，它是CSS psuedo-class :focus

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

如果有效，请使用{outline:none}将其删除。不过，我很担心你的可访问性，仅供参考。

Answer 2

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

选项1

从使用.ui-widget类的所有元素中删除大纲：

.ui-widget * { outline: none; }​

这是a working fiddle。

选项2

使轮廓颜色透明：

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

这是a working fiddle。

Answer 3

我设法用

将其删除

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

Answer 4

如果您只想删除特定标签上的轮廓，我建议您使用以下内容：

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

在html的脚本标记内。

Answer 5

您可以通过指定outline-width: 0;

来停用大纲

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

---

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

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

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

Answer 6

我必须这样做以防止可能的初始Tab键顺序焦点：

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

Answer 7

你可以试试这个

a:focus { outline: none; } 

Answer 8

为了使其更清晰，大纲显示在ul.ui-tabs li.ui-tabs-nav内部的元素上。 上面的大多数例子都没有提到这一点：所以这里有一个原始问题的工作答案：

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

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

Answer 9

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

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