JS新手求助：根据指定URL动态显示/隐藏两个div失败问题

嘿，我懂你遇到的这个小麻烦——这种URL匹配的细节坑在JS新手阶段真的很容易踩！你的整体思路完全没问题，但脚本失效大概率是精确URL匹配的局限性导致的，咱们来一步步修正它：

问题根源 #

你用window.location.href做完全相等的匹配，但这个属性返回的是完整的URL字符串，会包含尾部斜杠、查询参数、哈希值这些额外内容。比如：

• 实际访问的是https://urlzero.com/（带末尾斜杠），和你写的https://urlzero.com就不相等
• 如果URL带参数（比如https://urlone.com?foo=bar），同样会匹配失败

另外，document.querySelectorAll('.div1')[0]虽然能拿到元素，但用document.querySelector('.div1')更简洁直接，可读性也更强。

修正方案 #

我们可以改用window.location.hostname来判断，它只会返回域名部分（比如urlzero.com），不管路径、参数这些额外内容，匹配逻辑更可靠。同时优化元素获取和代码逻辑：

修正后的JS脚本

window.onload = function() {
  const currentDomain = window.location.hostname;
  const div1 = document.querySelector('.div1');
  const div2 = document.querySelector('.div2');

  // 先默认显示两个div，再根据域名隐藏对应项
  div1.style.display = 'block';
  div2.style.display = 'block';

  if (currentDomain === 'urlzero.com') {
    div2.style.display = 'none';
  } else if (currentDomain === 'urlone.com' || currentDomain === 'urltwo.com') {
    div1.style.display = 'none';
  }
};

额外优化：避免页面加载闪烁 #

如果页面加载时先显示两个div再隐藏，会出现短暂的视觉闪烁。可以先在CSS里默认隐藏两个div，再通过JS控制显示：

.div1, .div2 {
  display: none;
}

然后调整JS逻辑，直接显示符合条件的div：

window.onload = function() {
  const currentDomain = window.location.hostname;
  const div1 = document.querySelector('.div1');
  const div2 = document.querySelector('.div2');

  if (currentDomain === 'urlzero.com') {
    div1.style.display = 'block';
  } else if (currentDomain === 'urlone.com' || currentDomain === 'urltwo.com') {
    div2.style.display = 'block';
  }
};

测试小技巧 #

你可以在浏览器控制台里输入window.location.hostname，看看实际返回的域名是什么，确保和你的判断条件完全一致。

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