下划线活动链接
问题描述:
我想在活动链接 上加下划线,但我无法成功选择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);
})
})
我可以移动的荧光笔,但只有当我点击下方的列表项,但不是链接本身。
答
可以使用: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();
});
+0
我不明白它是如何与你的解决方案 –
+0
我的理解,问题是与JavaScript我必须选择李的孩子,因为如果我点击李和不在链接上的荧光笔移动良好 –
使用CSS的任何问题? – Champ
不是所有,但我认为如果我想保持活动链接下划线,我必须需要JavaScript的某处没有? –
不,你可以使用:活动伪选择器,检查我的答案 – Champ