javascript - 单击按钮切换表单

Question

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

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

即使有人能给我指出正确的方向，那也很好，我在这方面还是个新手

Answer 1

这里是不使用jquery的一般原理。

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

我们再创建 2 个 div，这些将是我们的页面，我们将它们定位 absolute在选项卡 div 下方 和一个使用 z-index。

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

您可以找到很多 3rd party libraries/script/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