代码改变世界

简单的选项卡实现

2006-12-31 11:39  shaofeng  阅读(341)  评论(0)    收藏  举报

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
#btn
{
width:100px;
height:20px;
float:left;
}
#info
{
margin:50 50 50 50;
width:100px;
height:200px;
float:left;
}
</style>

<script language="javascript">
function fun(objId)
{
 //var obj=document.getElementById(objId);
 //alert()
 var obj1=document.getElementById("info1");
 var obj2=document.getElementById("info2");
 var obj3=document.getElementById("info3");
 obj1.style.display="none";
 obj2.style.display="none";
 obj3.style.display="none";
 objId.style.display="";
}
</script>
</head>

<body>
<div id="btn">
<div id="btn1" onclick="fun(info1)">btn1</div>
<div id="btn2" onclick="fun(info2)">btn2</div>
<div id="btn3" onclick="fun(info3)">btn3</div>
</div>
<div id="info">
<div id="info1" style="display:">第一个信息</div>
<div id="info2" style="display:none">第二个信息</div>
<div id="info3" style="display:none">第三个信息</div>
</div>
</body>
</html>
----------------------------
看到网上那么多选项卡的出现,在此我自己做了个简单的实现方法,相信大家能够明白意思了，
由于这个只是为了说明方法,代码写的简陋了点,希望大家能够从这里明白点原理~~