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

时间:2016-03-21 14:09:15

标签: html css twitter-bootstrap nav

在添加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>

1 个答案:

答案 0 :(得分:2)

onclick事件正在向你的li&gt;添加焦点伪类。一个元素。直到你点击开始引导程序使用以下css样式化导航项:

'For row 1 to x of RangeOfNewWorkbookNames
'Workbooks.open Template
'Workbooks.Sheets().Copy Paste
'Workbooks.SaveAs
'Workbooks.close
'Next row

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