页面FadeIN/FadeOUT过渡JavaScript Bug：链接跳转异常

问题原因 #

你现在所有链接都跳转到同一个页面，核心问题出在获取跳转地址的逻辑错误。看你代码里的这一行：

newLocation = $('.link a').attr("href");

$('.link a')这个选择器会选中页面上所有带.link类的元素下的<a>标签，而.attr("href")方法只会返回第一个匹配元素的href值——也就是页面里第一个链接（Music）的地址。不管你点哪个链接，拿到的都是同一个地址，自然跳转结果都一样了。

修复方案 #

只需要修改获取href的方式，让它拿到当前点击的那个链接的地址就行，这里提供两种直观的修改方式：

方式一：绑定容器事件，获取当前容器内的链接地址

把JS里的点击事件代码改成这样：

$(document).ready(function() {
  $('body').css('display', 'none');
  $('body').fadeIn(1000);

  $('.link').click(function(event) {
    event.preventDefault();
    // 用$(this)指代当前被点击的.link容器，再找里面的a标签
    const newLocation = $(this).find('a').attr("href");
    $('body').fadeOut(1000, function() {
      window.location = newLocation;
    });
  });
});

方式二：直接绑定a标签事件（更直观）

如果觉得绑定容器有点绕，也可以直接把点击事件绑定到<a>标签上，这样$(this)就是当前被点击的链接本身：

$(document).ready(function() {
  $('body').css('display', 'none');
  $('body').fadeIn(1000);

  $('.link a').click(function(event) {
    event.preventDefault();
    // 直接取当前点击的a标签的href
    const newLocation = $(this).attr("href");
    $('body').fadeOut(1000, function() {
      window.location = newLocation;
    });
  });
});

两种方式都能解决你的问题，选哪种看你自己的习惯～

内容的提问来源于stack exchange，提问作者wewiowe