含有注册登录切换tab的弹窗前端代码

以下是一个简单的含有注册登录切换tab的弹窗前端代码：

HTML部分：

<div class="modal">
  <div class="modal-content">
    <ul class="tab-group">
      <li class="tab active"><a href="#login">登录</a></li>
      <li class="tab"><a href="#signup">注册</a></li>
    </ul>
    <div class="tab-content">
      <div id="login">
        <h1>欢迎回来！</h1>
        <form>
          <div class="field-wrap">
            <label>
              邮箱<span class="req">*</span>
            </label>
            <input type="email" required autocomplete="off" />
          </div>
          <div class="field-wrap">
            <label>
              密码<span class="req">*</span>
            </label>
            <input type="password" required autocomplete="off" />
          </div>
          <p class="forgot">
            忘记密码了？<a href="#">重置密码</a>
          </p>
          <button class="button button-block">登录</button>
        </form>
      </div>
      <div id="signup">
        <h1>欢迎加入我们！</h1>
        <form>
          <div class="top-row">
            <div class="field-wrap">
              <label>
                姓名<span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>
            <div class="field-wrap">
              <label>
                邮箱<span class="req">*</span>
              </label>
              <input type="email" required autocomplete="off" />
            </div>
          </div>
          <div class="field-wrap">
            <label>
              密码<span class="req">*</span>
            </label>
            <input type="password" required autocomplete="off" />
          </div>
          <button type="submit" class="button button-block">注册</button>
        </form>
      </div>
    </div>
  </div>
</div>

CSS部分：

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 60px;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto;
  border: 1px solid #888;
  width: 40%;
  max-width: 600px;
  padding: 30px 50px;
}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}

.tab-group:after {
  content: "";
  display: table;
  clear: both;
}

.tab {
  float: left;
}

.tab a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background-color: #eee;
  color: #888;
  margin-right: 1px;
  font-size: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tab.active a {
  background-color: #fff;
  color: #000;
}

.tab-content {
  display: none;
  padding: 15px;
  border-radius: 0 5px 5px 5px;
  border: 1px solid #888;
  overflow: hidden;
}

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

.field-wrap {
  position: relative;
  margin-bottom: 25px;
}

label {
  font-size: 18px;
  font-weight: 400;
  display: block;
  margin-bottom: 5px;
}

input {
  font-size: 18px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #545f58;
  border-radius: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input:focus {
  outline: 0;
  border-color: #33c3f0;
  box-shadow: 0 0 5px rgba(51, 204, 240, 0.5);
}

.forgot {
  color: #888;
  font-size: 13px;
  text-align: center;
  margin-top: 15px;
}

.button {
  border: 0;
  outline: none;
  border-radius: 5px;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background-color: #33c3f0;
  color: #fff;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}

.button:hover,
.button:focus {
  background-color: #1cb3e8;
}

.button-block {
  display: block;
  width: 100%;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}

.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}

.top-row > div:last-child {
  margin-right: 0;
}

JavaScript部分：

document.addEventListener("DOMContentLoaded", function () {
  var tabs = document.querySelectorAll(".tab");
  var contents = document.querySelectorAll(".tab-content");

  for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener("click", function () {
      var activeTab = document.querySelector(".tab.active");
      var activeContent = document.querySelector(".tab-content.active");
      var currentTab = this;
      var currentContent = document.querySelector(
        currentTab.querySelector("a").getAttribute("href")
      );

      activeTab.classList.remove("active");
      currentTab.classList.add("active");

      activeContent.classList.remove("active");
      currentContent.classList.add("active");
    });
  }
});

以上代码会在页面加载完毕后自动执行，监听tab的点击事件，实现注册登录切换的功能。当用户点击注册或登录按钮时，会弹出一个模态框，其中包含两个tab，分别对应注册和登录功能。用户可以在模态框中输入相关信息进行注册或登录操作。