16

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

这个例子开始,我尝试了这个没有成功:

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

(基于this question and answer的提示)。

从活动选项卡中删除轮廓的技巧是什么?

4

9 回答 9

25

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

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

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

于 2013-01-04T04:52:28.190 回答
24

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

选项1

.ui-widget从使用该类的所有元素中删除轮廓:

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

这是一个工作小提琴

选项 2

使轮廓颜色透明:

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

这是一个工作小提琴

于 2013-01-03T18:33:45.150 回答
15

我设法将其删除

.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
     outline:none;
}
于 2014-02-10T03:24:45.637 回答
4

如果您只想删除特定选项卡上的大纲,那么我建议您使用以下内容:

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

在你的 html 的 script 标签内。

于 2013-05-17T07:01:27.090 回答
3

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

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

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

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

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

于 2013-01-03T18:44:01.263 回答
3

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

.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
    outline:none;
}
于 2015-01-16T02:21:51.580 回答
1

你可以试试这个

a:focus { outline: none; } 
于 2015-01-03T18:58:18.870 回答
0

为了更清楚,轮廓出现在 ul.ui-tabs li.ui-tabs-nav 内部的元素上。上面的大多数例子都忘了提到这一点:所以这是原始问题的有效答案:

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

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

于 2013-06-08T18:20:50.307 回答
0

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

.ui-state-hover, .ui-state-focus, .ui-state-active
{
    border: 1px solid #ccc !important; /*Or any other color*/
    border-bottom: 0 !important;
} 
于 2018-08-23T14:37:09.983 回答