Javascript 通过单击按钮切换表单

我想改变我的表格，点击按钮，就像这样

---

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

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

我们创建了两个

div

s和

float

并排，它们将是我们的选项卡，当然，您可以拥有更多

我们再创建两个

div

s，这将是我们的页面，我们

将它们
放置在选项卡
div
s下方，并使用
z-index
将一个放置在另一个上方

我们向2个选项卡
div
s添加
click
事件侦听器，当单击时，我们反转2个页面的
z-index
值

你可以在那里找到很多

CSS

HTML

在
上，使用jquery UI和选项卡。不是一个方向的粉丝，（但这只是为了搞笑的效果，使用JQuery方法）谢谢大家欣赏
#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;
}

<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>

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";
});