基于URL中email字符控制Div显示/隐藏失效的技术求助

嘿，我来帮你搞定这个两个Div一直显示的问题！咱们先拆解下问题根源，再给出完整的修复方案：

问题分析 #

两个Div始终显示，大概率是两个原因：

• 初始状态没设置隐藏：页面加载时Div默认是display: block，如果JS执行不及时或出错，就会一直保持显示
• JS执行时机不对：如果代码在DOM元素还没渲染完成时就运行，getElementById会拿到null，根本没法修改显示状态

完整修复代码 #

1. 先设置初始CSS状态 #

给两个Div加上默认隐藏样式，避免页面加载时的闪烁，也确保初始状态正确：

#sociallocker, #emaillocker {
    display: none; /* 默认都隐藏，后续由JS控制显示 */
}

2. 编写正确的JavaScript逻辑 #

确保代码在DOM完全加载后执行，准确判断URL是否包含“email”字符串：

// 等待DOM所有元素渲染完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取当前页面的完整URL
    const currentUrl = window.location.href;
    // 获取目标Div元素
    const socialLocker = document.getElementById('sociallocker');
    const emailLocker = document.getElementById('emaillocker');

    // 判断URL是否包含"email"关键字
    if (currentUrl.includes('email')) {
        // 显示社交锁，隐藏邮箱锁
        socialLocker.style.display = 'block';
        emailLocker.style.display = 'none';
    } else {
        // 隐藏社交锁，显示邮箱锁
        emailLocker.style.display = 'block';
        socialLocker.style.display = 'none';
    }
});

3. 对应HTML结构示例 #

确保你的Div结构和ID是正确的（和你提供的片段匹配）：

<div id="sociallocker">
    <!-- 社交锁的内容 -->
    这是社交锁定区域
</div>

<div id="emaillocker">
    <!-- 邮箱锁的内容 -->
    这是邮箱锁定区域
</div>

替换后测试 #

把这些代码替换你原来的实现，再访问测试链接就能看到：当URL包含“email”时，社交锁显示、邮箱锁隐藏；反之则邮箱锁显示、社交锁隐藏。

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