答案 0 :(得分：2)
这是不使用jquery的一般原则。
我们并排创建了2个div和float个，这些将是我们的标签，或者您可以拥有更多。
我们再创建两个div，这些将是我们的网页，我们position absolute div位于标签z-index下方，另一个使用click {1}}。
我们在2个标签div中添加了z-index个事件监听器，点击后我们反转了2个页面的#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;
}
值。
你可以找到很多3rd party libraries/script/css。
CSS
<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>
HTML
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";
});
的Javascript
{{1}}
上