下劃線活動鏈接

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(); 
});