选项卡的制作

来源:互联网 发布:arp绑定mac添加失败 编辑:程序博客网 时间:2024/06/08 00:21

<script type="text/javascript">
window.onload=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.onclick= function()
{
a.style.display="block";
b.style.display="none";
c.style.display="none";
// a.style.zIndex="none";

}

e.onclick=function()
{
a.style.display="none";
b.style.display="block";
// b.style.zIndex="999";
c.style.display="none";

}

f.onclick=function()
{
a.style.display="none";
b.style.display="none";
c.style.display="block";
// c.style.zIndex="999";

}
}




</script>













<body>




<button id="but1">红色</button>
<button  id="but2">绿色</button>
<button  id="but3">蓝色</button>
<!--onclick="a()"
onclick="b()"
onclick="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属性来让他们对应的显示或者隐藏。



0 0