禁用导航链接上的聚焦行为

Disable Focus behavior on nav links?

本文关键字：聚焦 导航 链接      更新时间：2023-09-26

除了按钮之外，我的问题几乎都适用于锚链接：如何使用Bootstrap 3 阻止按钮保持按下状态

我正在使用Bootstrap 3（在FF&Chrome中测试），我的.navbar是用scrollspy功能修复的。当我点击导航链接时，链接将保持在聚焦模式（在滚动时不点击外部-我的导航现在显示两个链接！[1活动/1focus]），删除聚焦状态的唯一方法是点击导航之外的任何地方。焦点状态在Safari中不是一个可见的问题。

如何使用mousedown/mouseup自动取消导航链接的聚焦

编辑：鼠标悬停不是之前认为的根本问题。

我的#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>

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

需要设置样式的（滚动间谍）活动链接

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

并移除在mousedown时在下面徘徊的CCD_ 1。

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

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

https://jsfiddle.net/re2hLe8r/

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

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

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

相关文章：