html - 应用 onclick 后单击时 Bootstrap 导航栏变为灰色

Question

在添加 onclick 函数之前，我的导航栏工作得很好。我的 onclick 函数如下所示:

$('.nav li a').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
        var $target = $(this.hash);
        $target = $target.length && $target
            || $('[name=' + this.hash.slice(1) +']');
        if ($target.length) {
            var targetOffset = $target.offset().top;
            $('html,body')
                .animate({scrollTop: targetOffset}, 2000);
            return false;
        }
    }
});

当我单击导航栏中的一项时，它会执行 onclick 功能，但是当我将鼠标悬停在我刚刚单击的导航栏项之外时，它会变成灰色。当我点击之后的任何东西时，它会再次删除灰色。我的导航栏看起来像这样:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <div class="navbar-header">

        <a href="#home"><img src="../Images/Logo.png" width=200px" height="50px"/></a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav navbar-right">
            <li><a class="home" href="#home">Home</a></li>
            <li><a href="#projects">My Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>

    </div>
</div>

Answer 1

onclick 事件为您的 li > a 元素添加了一个焦点伪类。在您点击离开之前，bootstrap 正在使用以下 css 设置导航项的样式:

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #333;
    background-color: transparent;
} 

您可以覆盖 :focus 样式或放置此 jquery:$(this).blur();在你的功能结束时。