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>

而且,就是这样.我试着尽可能详细地解释每个步骤的作用.显然,您可以缩短类名称并删除注释以使其变小和精简.