上的 tabIndex 上有奇怪的边框元素

Question

我目前正在尝试使一些显示/隐藏内容在大型网站（超过 30,000 个页面）上更易于访问，并且在添加 tabindex 时遇到了一个奇怪的错误，其中单击控件打开隐藏内容。

设置 p 标签，单击该标签即可淡入 div 显示隐藏内容。 我根本无法修改 HTML，因为网站上有数千个 HTML，所以这就是我必须处理的内容。目前，为了添加 tabindex，我正在使用 jQuery 动态执行此操作，为每个 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

Answer 2

我有一个更好的解决方案来解决这个问题，混合javascript/css。

$('[tabindex]').focus(function()
{
    $(this).css('outline', 'none');
});
$('[tabindex]').keyup(function (event)
{
    if(event.keyCode == 9)
    {
        $(this).css('outline', '');
    }
});

这样，如果您按 Tab 键浏览，它仍然有效，但如果单击则无效。

Answer 3

尽管不是最有效的 CSS 选择器，但您可以从所有具有 tabindex 属性的 DOM 元素中删除它，只需使用以下 CSS：

[tabindex] {
   outline: none !important;
}

Answer 4

您是否尝试过使用脚本设置 css ？像这样的东西

$("#content div.showHide p.showHideTitle").focus(function () {
     $(this).css('border','0');
});

Answer 5

但是，用户通过按 Tab 键聚焦时应该看到轮廓。

Answer 6

<div class="className" tabIndex="1" style={{outline: 0}}>
    <p> Try this... I hope this works!</p>
<div>