下划线活动链接

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

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