下划线活动链接

Question

我想在活动链接 上加下划线，但我无法成功选择Html.actionLink。这是我的HTML：

<nav class=" navbar-collapse secondaryNav collapse" > 

    <div id="highlighter" class="blue"></div> 
       <ul class="nav navbar-nav col-lg-12 col-md-12 col-sm-12" style="margin-left:7%" id="menu"> 
        <li class="col-lg-4 col-md-4 col-sm-4 border ">@Html.ActionLink("Organize", "Organize", "Home")</li> 
        <li class="col-lg-4 col-md-4 col-sm-4 border " >@Html.ActionLink("Participate", "Participate", "Home")</li> 
        <li class="col-lg-4 col-md-4 col-sm-4 border ">@Html.ActionLink("Support", "Support", "Home")</li> 
       </ul> 
      </nav> 

这是的JavaScript我使用

$(document).ready(function() { 

    $('#menu li ').click(function myfunction(){ 

    // POSITIONNER LA BARRE BLEUE 
    $('#highlighter').animate({"left": $(this).offset().left},500); 
    }) 
}) 

我可以移动的荧光笔，但只有当我点击下方的列表项，但不是链接本身。

Answer 1

可以使用:active pseudo selector为EG

<nav class=" navbar-collapse secondaryNav collapse" > 

    <div id="highlighter" class="blue"></div> 
       <ul class="nav navbar-nav col-lg-12 col-md-12 col-sm-12" style="margin-left:7%" id="menu"> 
        <li class="col-lg-4 col-md-4 col-sm-4 border ">@Html.ActionLink("Organize", "Organize", "Home")</li> 
        <li class="col-lg-4 col-md-4 col-sm-4 border " >@Html.ActionLink("Participate", "Participate", "Home")</li> 
        <li class="col-lg-4 col-md-4 col-sm-4 border ">@Html.ActionLink("Support", "Support", "Home")</li> 
       </ul> 
</nav> 

CSS

评论

后

#highlighter a:active {text-decoration:underline} 

1.更新再添加一个事件处理程序，以避免<a>标签

的默认

$('#menu li a').click(function(e){ 
    e.preventDefault(); 
});