javascript - 打开和关闭 Javascript

Question

我一直在寻求有关创建这个打开的 div 和关闭的 div 系统的帮助。

这看起来有点简单，这里有一个例子:http://codepen.io/sripavani/pen/WpQyYJ

我正在寻找的是当我单击位于注册 div 表单上方的注册标签时打开注册 div。反之亦然，如果他们点击登录，注册框会关闭，登录框会打开。

我已将登录 div 设置为在启动时显示并隐藏注册框。

<section class="secright">
    <ul>
        <li><a class="registerbutton">Sign Up</a></li>
        <li><a class="loginbutton1">Login</a></li>
    </ul>
    <div id="register">
        <input class="input1" type="firstname" placeholder="Firstname">
        <input class="input2" type="lastname" Placeholder="Lastname">
        <input class="input1" type="email" placeholder="Email">
        <input class="input2" type="password" Placeholder="Password">
        <input class="input2" type="password" Placeholder="Repeat Password">
    </div>
    <div id="login">
        <input class="input1" type="email" placeholder="Email">
        <input class="input2" type="password" Placeholder="Password">
        <button class="loginbutton2">Login</button>
        <div class="checkboxlogin">
            <input class="checkbox1" type="checkbox">
            <p>bla blaa blaaa</p>
        </div>
    </div>
</section>

这是我的 HTML，它已经根据我的需要设置了样式。只需要上面的标签工作，用户就可以注册或登录。

我希望得到一些关于 Javascript 的建议，或者只是一个简单的 CSS 方法。它不需要任何花哨的效果或任何东西。请记住，我对 javascript 还一无所知。我非常熟悉 HTML 和 CSS。

Answer 1

将 data-panel 属性添加到表示要显示的部分/面板 ID 的链接。给面板一个一致的类，默认隐藏它们，并添加一个 .active 类来表示应该显示哪个。然后在 jQuery 中，根据您单击的链接将 .active 类添加到面板。

var buttons = document.getElementsByClassName('button'),
    panels = document.getElementsByClassName('panel');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click',function() {
    var target = document.getElementById(this.getAttribute('data-panel'));
    for (var j = 0; j < panels.length; j++) {
      panels[j].classList.remove('active');
    }
    target.classList.add('active');
  })
}

.panel:not(.active) {
  display: none
}

<section class="secright">
    <ul>
        <li><a class="registerbutton button" data-panel="register">Sign Up</a></li>
        <li><a class="loginbutton1 button" data-panel="login">Login</a></li>
    </ul>
    <div id="register" class="panel active">
        <input class="input1" type="firstname" placeholder="Firstname">
        <input class="input2" type="lastname" Placeholder="Lastname">
        <input class="input1" type="email" placeholder="Email">
        <input class="input2" type="password" Placeholder="Password">
        <input class="input2" type="password" Placeholder="Repeat Password">
    </div>
    <div id="login" class="panel">
        <input class="input1" type="email" placeholder="Email">
        <input class="input2" type="password" Placeholder="Password">
        <button class="loginbutton2">Login</button>
        <div class="checkboxlogin">
            <input class="checkbox1" type="checkbox">
            <p>bla blaa blaaa</p>
        </div>
    </div>
</section>