禁用导航链接上的焦点行为？

Question

几乎我的问题减去了按钮 - 我的问题适用于锚 links：How to stop buttons from staying depressed with Bootstrap 3

我正在使用 Bootstrap 3（在 FF 和 Chrome 中测试），我的 .navbar 已使用 scrollspy 函数修复。当我点击导航 link 时，link 保持在 Focused 模式（并且在不点击外部的情况下滚动 - 我的导航现在同时显示 link s! [1 active/1focus])，并且移除焦点状态的唯一方法是单击导航之外的任意位置。焦点状态在 Safari 中不是一个可见的问题。

如何使用 mousedown/mouseup 自动取消导航 link 的焦点？

编辑： Mouseup/mousedown 并不是之前认为的根本问题。

我的#nav，以防有人想知道。谢谢！

<body id="page-top" data-spy="scroll" data-offset="" data-target=".navbar-fixed-top">

   <nav role="navigation" id="nav" class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
                <a class="navbar-brand" href="#page-top">TOP</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right text-center">
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#work">WORK</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

如果我正确理解了你的问题，你只想使用 .active css class 来显示选定的导航。一种选择是在聚焦导航上覆盖 bootstrap 的默认颜色。

.navbar-inverse .navbar-nav>li>a:focus {
    color:#777;
    outline:none; // to remove possible blue borders
}

http://jsfiddle.net/sygn/3k7e88p9/

Answer 2

jquery 解决方案，因为您要求 mousedown/mouseup:

$(".navbar-brand").mouseup(function(){
    $(this).blur();
});

https://jsfiddle.net/re2hLe8r/

Answer 3

解决我困境的特定细节。现在适用于 FF 和 Chrome.

需要设置样式的 (scrollspy) 活动 link

.navbar-inverse .navbar-nav > .active > a:focus {color: #262A3A;}

并删除了在 mousedown 下方徘徊的 .navbar .nav > li > a:focus {color: red;}。

禁用导航链接上的焦点行为？

Disable Focus behavior on nav links?

javascript

jquery

css

twitter-bootstrap-3

onfocus