Question

在我的Javascript中，我有一个功能，在点击时会在我的标题导航栏上显示一个链接：

$(".navbar-inverse .navbar-nav > li > a").click(function() {        
          $(".navbar-inverse .navbar-nav > li > a").removeClass("active"); 
          $(this).addClass("active");          
});

.active { 
      text-decoration: underline; 
}

但点击链接并悬停结束后，由于以下CSS，下划线消失并且链接会像往常一样改变颜色：

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
                            color: red; /* flash */  
 }

我尝试通过添加文本修饰来解决这个问题：下划线;到上面的CSS，但是当链接悬停在上面时会导致下划线总是出现。因此，我将如何使用jQuery，最好让它像上面那样强调活动链接，1。防止下划线在点击的链接悬停在2之后消失。（真的类似于1）防止链接改变后的颜色点击并盘旋。

编辑（它看起来像做它应该做的事情，感谢@amol）：

$(".navbar-inverse .navbar-nav > li > a ").click(function() {        
      $(".navbar-inverse .navbar-nav > li > a ").removeClass("active"); 
      $(this).addClass("active");          
});

.navbar-inverse .navbar-nav > li > a {
      color: #ffffff /* text color default */;
}

.navbar-inverse .navbar-nav > li > a.active,
.navbar-inverse .navbar-nav > li > a.active:hover,
.navbar-inverse .navbar-nav > li > a.active:focus{
      color: #ffffff;
      text-decoration: underline;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
      color: red; /* flash */
}

.active { 
      text-decoration: underline; 
}

Answer 1

试试此代码

$(".navbar-inverse .navbar-nav > ul > li > a").click(function() {        
          $(".navbar-inverse .navbar-nav > ul > li > a").removeClass("active"); 
          $(this).addClass("active");          
});

选中此Demo

Answer 2

可能你忘记添加ul

.navbar-inverse .navbar-nav > ul > li > a:hover, .navbar-inverse .navbar-nav > ul > li > a:focus {
    color: red;
    text-decoration:underline;
}

请点击此处查看示例：http://jsfiddle.net/5SAv5/

如何在点击然后盘旋之后保持链接带下划线

2 个答案: