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 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/

jQuery UI选项卡大纲删除

1 个答案: