<div class="auth-container">
  <div class="tabs">
    <span class="tab active" data-tab="login">登录</span>
    <span class="tab" data-tab="register">注册</span>
  </div>
<p><div class="form-container">
<div class="form login-form" id="login">
<h3>用户登录</h3>
<input type="text" placeholder="用户名" />
<input type="password" placeholder="密码" />
<button>登录</button>
</div></p><pre class='brush:php;toolbar:false;'><div class="form register-form" id="register">
  <h3>用户注册</h3>
  <input type="text" placeholder="用户名" />
  <input type="email" placeholder="邮箱" />
  <input type="password" placeholder="密码" />
  <button>注册</button>
</div>

.auth-container {
  width: 300px;
  margin: 50px auto;
  font-family: Arial, sans-serif;
}
<p>.tabs {
display: flex;
border-bottom: 1px solid #ddd;
}</p><p>.tab {
padding: 10px 15px;
cursor: pointer;
background: #f5f5f5;
border: 1px solid #ddd;
border-bottom: none;
margin-right: 5px;
border-radius: 5px 5px 0 0;
}</p><p>.tab.active {
background: #fff;
font-weight: bold;
}</p><p>.form-container {
padding: 20px;
border: 1px solid #ddd;
border-top: none;
min-height: 200px;
}</p><p>.form {
display: none; /<em> 所有表单默认隐藏 </em>/
}</p><p>.form.login-form {
display: block; /<em> 默认显示登录表单 </em>/
}</p>

document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', function() {
    // 获取当前点击的 tab 对应的内容 ID
    const target = this.getAttribute('data-tab');
<pre class='brush:php;toolbar:false;'>// 移除所有 tab 的 active 类
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));

// 给当前 tab 添加 active 类
this.classList.add('active');

// 隐藏所有表单
document.querySelectorAll('.form').forEach(form => {
  form.style.display = 'none';
});

// 显示目标表单
document.getElementById(target).style.display = 'block';

}); });