如何通过其他页面链接跳转后用jQuery显示配件页对应隐藏div

问题原因 #

• 代码执行顺序逻辑错误：页面刚加载时先执行了hash判断显示对应div的逻辑，但后续DOM加载完成后又统一把所有.data类元素隐藏了，之前的显示操作被覆盖无效
• $(document).ready() 内部的 $(this).val() 没有实际含义，this 此时指向document对象，不存在val值，这段逻辑完全无法命中要显示的元素
• 末尾的.change()没有绑定对应事件处理函数，属于无效代码

解决代码 #

直接替换你现有配件页的jQuery代码即可：

$(document).ready(function(){
  // 先隐藏所有配件展示div
  $(".data").hide();
  // 判断URL是否携带锚点参数
  if(location.hash) {
    // 去掉锚点前缀的#号，匹配对应配件的类名
    const targetType = location.hash.slice(1);
    $(`.data.${targetType}`).fadeIn(700);
    // 可选功能：自动滚动到目标配件的展示位置，不需要可以删除这段
    $('html, body').animate({
      scrollTop: $(`.data.${targetType}`).offset().top
    }, 300);
  }
});

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