拆分Login/Signup单页为独立页面后关联失效的解决求助

问题根源 #

原代码是单页切换逻辑（通过CSS类切换显示/隐藏登录/注册表单），拆分独立页面后出现以下问题：

1. signup.html中仅包含.form.signup，但CSS默认隐藏了该类，导致页面空白
2. 两个页面都未引入script.js，密码显示/隐藏功能失效
3. signup.html中的跳转链接文字错误（写成了Signup，应为Login）
4. 原JS中的链接点击事件是阻止跳转并执行单页切换，与多页逻辑冲突

修改步骤与代码 #

1. 修复style.css（移除单页切换的隐藏规则） #

删除以下针对单页切换的CSS代码，因为现在是两个独立页面，每个页面仅需显示对应表单：

.form.signup{
    opacity: 0;
    pointer-events: none;
}

.forms.show-signup .form.signup{
    opacity: 1;
    pointer-events: auto;
}

.forms.show-signup .form.login{
    opacity: 0;
    pointer-events: none;
}

2. 更新login.html（引入JS文件） #

在</body>标签前添加script.js的引入，确保密码显示/隐藏功能生效：

<!-- 在body结束前插入JS引入 -->
<script src="script.js"></script>
</body>
</html>

（原login.html的跳转链接逻辑正确，无需额外修改）

3. 更新signup.html（修正链接文字+引入JS） #

• 将跳转链接的文字从Signup改为Login
• 在</body>标签前引入script.js

修改后的关键代码片段：

<div class="form-link">
    <span>Already have an account? <a href="login.html" class="link signup-link">Login</a></span>
</div>

<!-- 新增JS引入 -->
<script src="script.js"></script>
</body>
</html>

4. 简化script.js（移除单页切换逻辑） #

删除原JS中针对单页切换的links事件处理，仅保留密码显示/隐藏功能：

const pwShowHide = document.querySelectorAll(".eye-icon");

pwShowHide.forEach(eyeIcon => {
eyeIcon.addEventListener("click", () => {
  let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
  
  pwFields.forEach(password => {
      if(password.type === "password"){
          password.type = "text";
          eyeIcon.classList.replace("bx-hide", "bx-show");
          return;
      }
      password.type = "password";
      eyeIcon.classList.replace("bx-show", "bx-hide");
  })
  
})
})

最终效果 #

• login.html与signup.html可通过链接正常互相跳转
• 两个页面的密码显示/隐藏功能正常工作
• 页面内容正常显示，无空白问题

内容的提问来源于stack exchange，提问作者Rahul Raj Mehra