0

我正在使用 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>

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

4

3 回答 3

2

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

#more a
{  
    outline: none;  
}

正如其他人所提到的，这会影响某些用户的可访问性，但您可以将替代样式应用于选项卡以保留该可访问性......例如，更改焦点上的字体颜色：

#more a:focus
{  
    color: #f00;  
}
于 2013-05-02T19:58:14.027 回答
1

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

但请记住，轮廓是可访问性的一部分，因为它向用户显示了他的“标签”在哪里。因此，不能使用鼠标的用户会不知道他在哪里。

于 2013-05-02T19:59:50.573 回答
0

增加绿色背景栏的高度或填充，并简单地更改轮廓颜色以匹配该绿色。这种方式不会取消可访问性，并且您仍然可以看到干净的外观。

于 2013-05-02T20:03:30.117 回答