Question

I use bootstrap and I have this navBar :

$('#linkNav').click(function() {
    var r = confirm("Do you really really wanna do that?");
    if (r == false) {
        //randomfunc();
    }
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <span class="navbar-brand" disabled>Title</span>>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                  <li><a id="linkNav" href="#">Link</a></li>
              </ul>
          </div>
     </div>
</nav>

Everything work well except one really annoying little thing.

On my link I have a Hover to pass it color to white when the mouse pass over (bootstrap standard navbar) but when I click on the link (so color white) the box open I click on one button (ok or cancel no matter) and the link stay white. But if I click on the page no matter where it return to his original color.

Someone know how to fix this?

Answer 1

这是因为Bootstrap会在菜单项中添加 active 类（li或a元素，我不确定）。

因此，请在点击 事件处理程序 功能中删除该类。

希望这会有所帮助.....

Answer 2

如果你要破解bootstrap css做对了，我假设你已经使用nav-bar的标签做了那么让我们做其余的

.nav-bar > li > a:hover,
.nav-bar > li > a:focus{
   color: white; //<<the one you want
   background-color: black; //the one you want
}

也许您需要添加！important对这些属性才能正常工作

Answer 3

您可以尝试使用选择器：有效或某些组合：焦点。

console.log(user);
console.log(JSON.stringify(user));
console.log(user.latitude);

Answer 4

试试这个，并在项目中导入jquery js。

$( "#linkNav" ).click(function() {
  alert( "Handler for .click() called." );
});

将鼠标悬停在<a> element stay block after and alert box

4 个答案: