javascript - 单击然后悬停后如何在链接上加下划线

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