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>

jQuery - 点击链接下划线

3 个答案: