URL含#login时为body添加modalOpen类仅刷新生效，求解决办法

嘿，我来帮你捋捋问题所在，以及怎么解决它～

为啥你的代码只有刷新才生效？ #

你的代码是放在$(document).ready里的，这个事件只会在页面首次加载完成时触发一次。如果用户是直接打开带#login的URL，页面加载时代码会执行，没问题；但如果是在页面已经加载完成后，通过点击链接跳转到homepage.com#login（比如从网站内的其他页面跳转，或者页面内的锚点切换），这时候ready事件不会再次触发，你的代码自然就不会执行啦。

解决方案：监听hash变化事件 #

我们需要把检查URL hash的逻辑抽成一个独立函数，然后同时处理「页面初始加载」和「hash发生变化」两种场景：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // 封装检查hash的逻辑成函数
  function toggleLoginModal() {
    // 用精准匹配代替indexOf，避免误判类似#login123的hash
    if (window.location.hash === '#login') {
      $('body').addClass('modalOpen');
    } else {
      // 可选：当hash不是#login时移除类，避免状态残留
      $('body').removeClass('modalOpen');
    }
  }

  // 页面刚加载时先检查一次
  toggleLoginModal();

  // 监听浏览器的hash变化事件，每次hash变了就重新检查
  $(window).on('hashchange', toggleLoginModal);
});
</script>

小细节优化 #

• 用window.location.hash === '#login'比indexOf更精准，不会误匹配像#login-test这种带后缀的hash
• 加上removeClass是为了让界面状态更严谨：当用户从#login切换到其他hash（比如#register）时，能自动移除modalOpen类，避免弹窗一直显示
• 另外，$(document.body)可以简化成$('body')，效果是完全一样的

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