Unterstreichen Active Link

Question

Ich möchte eine Unterstreichung auf Active Link setzen, aber ich kann nicht auf die Auswahl der Html.actionLink. Das ist mein 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> 

Dies ist die javascript i

$(document).ready(function() { 

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

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

verwende ich die Markierung bewegen kann, aber nur, wenn ich unter der Liste Artikel klicken, aber nicht auf den Link selbst .

Answer 1

können Sie verwenden :active pseudo selector für 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. Update nach Kommentar

Fügen Sie eine weitere Event-Handler-Standard von <a> Tag zu vermeiden

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