删除任何样式的jQuery选项卡

Question

我正在使用jquery选项卡，但当一个处于活动状态时，我会看到这个丑陋的边框：见图像

我试图给标签一个类并设置样式（因为你可以看到它带有蓝色文本的绿色），但没有任何帮助删除它。

但由于某种原因，它不会帮助

$(function() {
    $( "#more" ).tabs();
});

<div id="more">
      <ul id="cats">
        <li><a href="#alles">All</a></li>
        <li><a href="#web">Websites</a></li>
        <li><a href="#apps">Apps</a></li>
      </ul>
</div>

我可以设计任何颜色，但蓝色边框不会消失

Answer 1

尝试将此添加到您的CSS中。

#more a
{  
    outline: none;  
}

正如其他人所说，这会影响某些用户的辅助功能，但您可以为选项卡应用其他样式以保留该辅助功能...例如，更改焦点上的字体颜色：

#more a:focus
{  
    color: #f00;  
}

Answer 2

我认为这是浏览器的轮廓边框。 您可以使用CSS将其删除，并在标签中添加outline:none;。

但请记住，大纲是可访问性的一部分，因为它向用户显示了他的“标签”。因此，无法使用鼠标的用户在他所在的地方将毫无头绪。

Answer 3

增加绿色背景条的高度或填充，只需更改轮廓颜色以匹配该绿色。这样就不会带走可访问性，而且你仍然可以看清楚。