锚标记Chrome中的有效效果？

Question

我正在开发一个应用程序，它通过将一个包含锚标签的列表和一个容器中的每个选项卡的内容包装在一个可点击选项卡列表中来实现。这是列表，供参考。此代码输出以下图像。第二张图片是我点击非默认标签（即贷款）后Chrome中发生的事情的示例。

我认为Chrome正在生成此蓝色边框作为锚标记的某种活动效果，因为如果我按任意键或完全点击它将被删除。蓝色边框也不会出现在Internet Explorer 10中。我还没有测试过其他浏览器。

有没有办法阻止这个边界出现在第一位？我几乎可以肯定它是由webkit以某种方式生成的，但我并不熟悉它，也不了解它的文档。

    <ul>
    <li><a href="#Borrowers">Borrowers</a></li>
        <li><a href="#Loans">Loans</a></li>
    <li><a href="#Organizations">Funding Sources</a></li>
    <li><a href="#Users">Users</a></li>
    </ul>

Images Illustrating Before and After Click

Answer 1

显示该边框以显示焦点。添加以下css片段以从所有元素中删除焦点轮廓。

*:focus {outline: 0;}

如果您不想删除所有元素的焦点大纲，而只是删除标签列表，请添加以下内容。

li:focus{outline: 0;}

作为一个例子做了一个快速小提琴。

参见示例with focus outline和示例without focus outline