Question

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

我正在使用Bootstrap 3（在FF＆amp; Chrome中测试），我的.navbar使用scrollspy函数修复。当我点击导航链接时，链接保持在聚焦模式（滚动时不点击外部 - 我的导航现在显示两个链接！[1 active / 1focus]），以及删除的唯一方法焦点状态是单击导航外的任何位置。焦点状态在Safari中不是一个明显的问题。

我如何使用mousedown / mouseup自动对联导航链接？

编辑：如前所述，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

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

需要设置样式的（scrollspy）活动链接

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

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

Answer 2

jquery解决方案，因为你要求mousedown / mouseup：

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

https://jsfiddle.net/re2hLe8r/

Answer 3

如果我正确理解了您的问题，您只想使用.active css类来显示所选的导航。一种选择是覆盖聚焦导航的引导程序的默认颜色。

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

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

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

3 个答案: