如何在Magento 2.4中使用标签页设计登录与注册页面

下面是用HTML+CSS+JavaScript实现标签页式登录注册页面的基础方案：

HTML结构 #

先搭建标签栏和对应的表单面板：

<div class="tab-container">
  <div class="tabs">
    <button class="tab-btn active" data-tab="login">登录</button>
    <button class="tab-btn" data-tab="register">注册</button>
  </div>
  <div class="tab-content">
    <div id="login" class="tab-panel active">
      <form>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <button type="submit">登录</button>
      </form>
    </div>
    <div id="register" class="tab-panel">
      <form>
        <input type="text" placeholder="用户名">
        <input type="email" placeholder="邮箱">
        <input type="password" placeholder="密码">
        <button type="submit">注册</button>
      </form>
    </div>
  </div>
</div>

CSS样式 #

实现标签切换的视觉效果，隐藏非活动面板，美化表单样式：

.tab-container {
  max-width: 400px;
  margin: 20px auto;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

.tab-btn.active {
  border-bottom: 2px solid #2196F3;
  color: #2196F3;
  font-weight: bold;
}

.tab-panel {
  display: none;
  padding: 20px 0;
}

.tab-panel.active {
  display: block;
}

form input {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

form button {
  width: 100%;
  padding: 10px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

form button:hover {
  background: #1976D2;
}

JavaScript交互 #

实现点击标签切换对应面板的功能：

const tabBtns = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('.tab-panel');

tabBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 移除所有元素的活动状态
    tabBtns.forEach(b => b.classList.remove('active'));
    tabPanels.forEach(p => p.classList.remove('active'));
    
    // 为当前点击的标签和对应面板添加活动状态
    btn.classList.add('active');
    document.getElementById(btn.dataset.tab).classList.add('active');
  });
});

你可以根据实际需求调整样式细节（比如颜色、间距），或者添加表单验证、提交逻辑等功能。

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