如何在点击时加载隐藏的<div>

Question

我正在通过使用html设计一个前端登录/注册页面并具体化CSS。我要包括的功能有：

• 卡中的选项卡视图，其中包含两个项目的无序列表：

  • “登录”（<a href="#login">）和
  • “注册”（<a href="#signup">）。

• 两个具有各自ID的单独内容区域：“登录”和“注册”

我的目标是在用户单击Login时加载“ id = login”内容，同样在单击SignUp时加载“ id = signup”内容，但这不起作用。如图所示，选项卡视图和内容“卡”均显示。

---

屏幕截图

---

这是我的代码

<div class="row">
    <div class="col l6 offset-l3 m8 offset-m2 s12">
        <div class="card-panel center">
        <ul class="tabs">
            <li class="tab"><a href="#login">Login</a></li>
            <li class="tab"><a href="#signup">Sign Up</a></li>
        </ul>
        </div>
    </div>

     <!-- Login content area -->

     <div class="col l6 offset-l3 m8 offset-m2 s12" id="login">
        <div class="card-panel center">

        </div>
     </div>

     <!-- Sign Up content area -->
        <div class="col l6 offset-l3 m8 offset-m2 s12" id="signup">
          <div class="card-panel center">

          </div>
        </div>
      <!-- row ends here -->
</div>