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用于E.g

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

下划线活动链接

1 个答案: