打开和关闭 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

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

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>

打开和关闭 Javascript

Open and Close Javascript

html

javascript

css

show

hide