15

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

使用p标签设置，您单击以淡入显示隐藏内容的div 。我根本无法修改 HTML，因为整个站点有数千个这样的 HTML，所以这就是我必须使用的。目前要添加 tabindex 我正在使用 jQuery 动态地进行，为每个p标签添加一个不断增加的 tab 索引。

我第一个摆脱这个奇怪边框的方法是尝试 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标签时，我仍然会看到边框。关于如何摆脱它的任何建议？

4

6 回答 6

22

关于：

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

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

于 2011-06-01T15:04:33.400 回答
7

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

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

这样，如果您通过标签，它仍然可以工作，但如果您单击则不行。

于 2014-02-05T23:59:39.647 回答
6

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

[tabindex] {
   outline: none !important;
}
于 2013-10-29T16:17:57.403 回答
0

你试过css用你的脚本设置吗？就像是

$("#content div.showHide p.showHideTitle").focus(function () {
     $(this).css('border','0');
});
于 2011-06-01T15:02:59.447 回答
0

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

于 2019-02-14T09:20:24.850 回答
-1 
<div class="className" tabIndex="1" style={{outline: 0}}>
    <p> Try this... I hope this works!</p>
<div>
于 2020-10-18T06:13:25.170 回答