15

私は現在、大規模なサイト (30,000 ページを超える) で一部の表示/非表示のコンテンツをよりアクセスしやすくしようとしています。タブインデックスを追加すると、コントロールをクリックして開くと点線の境界線が表示されるという奇妙なバグに遭遇しました。隠しコンテンツ。

クリックして非表示のコンテンツを表示するdivにfadeInするpタグで設定します。サイト全体に何千もの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タグをクリックすると境界線が表示されます。それを取り除く方法について何か提案はありますか？

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 セレクターではありませんが、次の CSS だけで、tabindex 属性を持つすべての DOM 要素からこれを削除できます。

[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 に答える