如何从jQuery手风琴中删除活动轮廓？

Question

我正在使用 JQuery Accordion，活动链接具有轮廓线。我尝试使用CSS：

#accordion a:focus
 { outline: none; }
#accordion a:active 
{outline: none; font-weight:bold;}

并且也

#accordion a:-moz-any-link:focus 
{ outline: none; }

这些方法好像都不起作用。有人能建议一种设置或其他选项以去除活动链接周围的点状轮廓吗？

- Ash

---

有大约20个手风琴插件，你能提供一个链接吗？ - antpaw

通常来说，outline:none并不是一个良好的无障碍实践。详情可以参考网站 http://outlinenone.com/ 。 - gentimouton

Answer 1

你需要找出小部件应用的选项卡元素的类。例如，

.ui-state-focus { outline: none; }

这段代码在最新版本的jQuery UI上可以工作，但在早期版本（如1.6）上需要使用以下代码：

.ui-accordion-header {outline: none;}

- jacobangel

Answer 2

将以下内容添加到CSS样式表中，即可处理模糊/聚焦轮廓：

#accordion .ui-state-focus{
    outline: none;
}

- DraStudio

---

我喜欢这个解决方案是针对手风琴而不会影响其他jQuery脚本的。+1 - Andrew Fox

Answer 3

我只见过这种情况出现在标题标签上。要删除它，请添加以下代码：

h1, h2, h3, h4{outline:none;}

- Sean Madden

Answer 4

如果您正在使用jQueryUI的手风琴http://jqueryui.com/demos/accordion/，那么您不应该遇到这些类型的轮廓问题。但是如果您确实遇到了这种情况，您可以采用以下方法：

$(".ui-accordion-header a").click(function(){
  $(this).blur();
});

事实上，这种方法适用于几乎所有手风琴插件 - 只需确保修改选择器以针对负责展开/折叠数据面板的链接即可。

- Sampson

Answer 5

当我需要覆盖jQuery UI元素应用的样式时，通常会添加一个样式表，加载在jQuery UI样式表之后，并将我的覆盖放入其中，使用相同的选择器，以便我知道我的样式将优先。在这种情况下，查找与手风琴或小部件状态相关联的样式并覆盖它们。

- tvanfosson

Answer 6

已排序：

修改 CSS 为 - ui-state-focus

- Ash

Answer 7

一定要时不时地按F5键...并确保您没有编辑其他文件。

- RMC