jquery - 元素上的 tabIndex 出现奇怪的边框

Question

我目前正在尝试使一些显示/隐藏内容在大型网站(超过 30,000 页)上更易于访问，并且我在添加 tabindex 时遇到了一个奇怪的错误，点击控件时会出现虚线边框打开隐藏的内容。

使用 p 标签设置，您可以单击该标签淡入显示隐藏内容的 div。 我根本无法修改 HTML，因为网站上有成千上万的 HTML，所以这是我必须处理的。目前，我正在使用 jQuery 动态添加 tabindex，为每个 p 标签添加一个不断增加的标签索引。

我想摆脱这个奇怪的边框的第一个想法是尝试 CSS:

#content div.showHide p.showHideTitle:focus, 
#content div.showHide p.showHideTitle::focus, 
#content div.showHide p.showHideTitle::-moz-focus-border {
    outline: 0px !important; border: 0px !important;
}

这在 Chrome 和 Safari 中有效，但在 IE8 和 Firefox 3.6 中，当我点击 p 标签时，我仍然会看到边框。关于如何摆脱它有什么建议吗？

Answer 1

关于:

#content div.showHide p.showHideTitle {
    outline: none !important; 
}

您正在为伪类 :focus 设置大纲样式，但这可能“来晚了”。这里有一个简单的 jsFiddle