jQuery - 使点击链接加下划线

Question

刚刚开始让我的手变得与jQuery的善良和我试图解决的第一个任务是强调一个链接后，它已被点击。当然，被点击在同一div不同的链接后，前一个是不再强调......

问候

Answer 1

所以基本上，你想要一种导航菜单，改变链接的风格，一旦点击。首先，这只是强调一种风格：

<style type="text/css"> 
a.currentlyActive 
{ 
    text-decoration: underline; 
} 
</style> 

你会被修改的代码是...

<a class="navigation" href="#">My First Link</a> 
<a class="navigation" href="#">My Second Link</a> 
<a class="navigation" href="#">My Third Link</a> 

只是某种类型的类，它表示它是链接ü几个环节想要强调而不是强调。

接下来，添加一点jQuery魔术来点击时应用样式。同时，你会希望从其他人中删除这种风格。

<script type="text/javascript"> 
$(function() { 
    $('.navigation').click(function() { 
    // this removes the underline class from all other ".navigation" links. 
    $('.navigation').removeClass('currentlyActive'); 

    // this makes the one that was clicked underlined 
    $(this).addClass('currentlyActive'); 
    }); 
}); 
</script> 

而且，就是这样。我试图尽可能详细地解释每一步所做的事情。显然，你可以缩短课程名称并删除评论，以使它变得小而精。

Answer 2

$("a").click(function() { 
    var $this = $(this); 
    $this.closest("div").find("a").removeClass("underlined"); 
    $this.addClass("underlined"); 
}); 

然后，当然，你需要有一个名为“下划线”类，强调了这些链接。

Answer 3

这里是一个更清洁的版本：

<style type="text/css"> 
.underline { border-bottom:1px solid #000; } 
</style> 

<script type="text/javascript"> 
$(function() { 
    $('a').click(function() { 
     $('a').removeClass('underline'); 
     $(this).addClass('underline'); 
    }); 
}); 
</script>