锚标记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>

单击之前和之后的图像说明

Answer 1

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

*:focus {outline: 0;}

如果您不想消除所有元素的焦点轮廓,而只想删除选项卡列表,请添加以下内容.

li:focus{outline: 0;}

以快速小提琴为例.

查看具有焦点轮廓的样本和没有焦点轮廓的样本