jquery - jQuery UI 选项卡轮廓移除

Question

我正在寻找这个问题的更新和更具体的答案。

在此页面中，当您单击其中一个选项卡时，它具有蓝色轮廓：http: //jqueryui.com/tabs/

您如何删除它以及它位于哪个文件中？我目前正在使用 DreamWeaver CC，它会自动添加 jQuery 引用和样式表，包括 jquery.ui.core.min.css、jquery.ui.theme.min.css 和 jquery.ui.tabs.min.css。我在寻找什么类/ID，在什么文件中删除大纲？

Answer 1

在页面上初始化 jQuery UI 后，以下是 Chrome 开发工具中选项卡的 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/