javascript - 单击按钮切换表单

Question

我想像这样单击按钮来更改我的表单

http://postimg.org/image/ticav4jrb/

即使有人可以为我指出正确的方向，那也很棒，我对此很陌生

Answer 1

这是不使用jquery的一般原则。

我们创建 2div和float它们并排，这些将是我们的选项卡，或者当然你可以拥有更多。

我们再创建 2 个div，这些将是我们的页面，我们position将它们absolute放在 tabdiv的下方，使用z-index.

我们为 2 个 tab 添加一个click事件监听器div，当点击时我们反转z-index2 个页面的值。

您可以在那里找到大量的3rd 方库/脚本/css。

CSS

#tab1 {
    width: 10em;
    height: 2em;
    float: left;
    background-color: green;
    cursor: pointer;
}
#tab2 {
    width: 10em;
    height: 2em;
    float: left;
    background-color: red;
    cursor: pointer;
}
#page1 {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 2em;
    background-color: green;
    clear:both;
}
#page2 {
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
    top: 2em;
    background-color: red;
    clear:both;
}

HTML

<div id="tab1">Tab 1</div>
<div id="tab2">Tab 2</div>
<div id="page1">Some text in page 1</div>
<div id="page2">Some text in page 2</div>

Javascript

var tab1 = document.getElementById("tab1"),
    tab2 = document.getElementById("tab2"),
    page1 = document.getElementById("page1"),
    page2 = document.getElementById("page2");

tab1.addEventListener("click", function () {
    page1.style.zIndex = "1";
    page2.style.zIndex = "0";
});

tab2.addEventListener("click", function () {
    page1.style.zIndex = "0";
    page2.style.zIndex = "1";
});

在jsfiddle 上