0

この質問に対する最新のより具体的な回答を探していました。

このページで、タブの 1 つをクリックすると、青いアウトラインが表示されます: http://jqueryui.com/tabs/

それをどのように削除し、どのファイルにありますか? 私は現在 DreamWeaver CC を使用しており、jQuery の参照とスタイルシートが自動的に追加されました。探しているクラス/ID とアウトラインを削除するファイルは?

4

1 に答える 1

2

ページで jQuery UI が初期化された後、Chrome Dev Tools のタブの HTML 構造は次のようになります。

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner- all" role="tablist">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Nunc tincidunt</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Proin dolor</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Aenean lacinia</a>    </li>
</ul>

この CSS では、クリックしてもアウトラインが表示されません。こちらを参照してください: http://jsfiddle.net/GptHr/

.ui-tabs-anchor { outline: none; }

また、outline:none を使用するとアクセシビリティの問題が発生する理由についてもお読みください: http://www.outlinenone.com/

于 2013-09-16T01:40:34.583 に答える