如何让滑动式登录/注册页面默认显示指定面板？

问题 #

我复制了一款滑动式登录/注册页面并自定义了部分CSS，目前正在开发项目后端。需要实现用户跳转至带?panel=register参数的页面时，页面自动执行滑动动画显示注册面板，无需手动点击Sign Up按钮，但当前参数设置未生效。

解决方案 #

通过JavaScript解析URL查询参数，在页面加载完成后自动触发面板切换逻辑，具体修改如下：

修改后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const main = document.getElementById('main');

    // 解析URL中的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const targetPanel = urlParams.get('panel');

    // 根据参数自动切换到对应面板
    if (targetPanel === 'register') {
        main.classList.add('right-panel-active');
    } else if (targetPanel === 'login') {
        main.classList.remove('right-panel-active');
    }

    // 保留原有的手动切换逻辑
    signUpButton.addEventListener('click', () => {
        main.classList.add('right-panel-active');
    });
    signInButton.addEventListener('click', () => {
        main.classList.remove('right-panel-active');
    });
});

核心逻辑说明 #

• 使用URLSearchParamsAPI解析URL中的panel参数值
• 若参数值为register，给容器添加right-panel-active类，触发CSS中定义的滑动动画，自动显示注册面板
• 若参数值为login或无参数，则保持/切换回登录面板
• 保留原有的按钮点击切换逻辑，不影响用户手动操作

可选：PHP预渲染方案 #

如果希望页面加载时直接渲染目标状态（无需等待JS执行），可以修改容器的HTML代码，通过PHP动态输出类名：

<div class="container <?php echo isset($_GET['panel']) && $_GET['panel'] === 'register' ? 'right-panel-active' : ''; ?>" id="main">

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