<script type="text/javascript">
window.οnlοad=function()
{
var a=document.getElementById("red");
var b=document.getElementById("green");
var c=document.getElementById("blue");
var d=document.getElementById("but1");
var e=document.getElementById("but2");
var f=document.getElementById("but3");
d.οnclick= function()
{
a.style.display="block";
b.style.display="none";
c.style.display="none";
// a.style.zIndex="none";
}
e.οnclick=function()
{
a.style.display="none";
b.style.display="block";
// b.style.zIndex="999";
c.style.display="none";
}
f.οnclick=function()
{
a.style.display="none";
b.style.display="none";
c.style.display="block";
// c.style.zIndex="999";
}
}
</script>
<body>
<button id="but2">绿色</button>
<button id="but3">蓝色</button>
<!--οnclick="a()"
οnclick="b()"
οnclick="c()"-->
<div class="box_color">
<div class="box_1" id="red">1</div>
<div class="box_2" id="green">2</div>
<div class="box_3" id="blue">3</div>
</div><!--box_color大盒子-->
</body>
就是给三个按钮加上,然后内容方面加上3个盒子,外面一个大盒子(相对定位),其它三个盒子宽高相等,给绝对定位,三个盒子就重叠在一起了,在通过display:none,block属性来让他们对应的显示或者隐藏。