在大师的指导下写的第一个明程序，虽然结构还不是很专业，但毕竟是劳动的结果，自己赞一下！留个纪念
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的标签</title>
</head>
<script>
var tabTest = function(id)
{
this.objTabs = document.getElementById(id)
this.objTab = this.objTabs.getElementsByTagName('span');
this.objCont = this.objTabs.getElementsByTagName('div');
}
tabTest.prototype =
{
getInfo:function()
{
var _self = this;
for(var i = 0; i< this.objTab.length; i++)
{
if (this.objTab[i].id != 'undefine' )
{
if (window.addEventListener)
{
this.objTab[i].addEventListener('click',function(event){_self.clickTab(event)},false);
}else
{
this.objTab[i].attachEvent('onclick',function(){_self.clickTab(window.event)});
}
}
}
},
clickTab:function(e)
{
var qq = e || window.event;
var tab_id = qq.target|| qq.srcElement;//
tab_id = tab_id.id;
cid = (tab_id).substring(tab_id.lastIndexOf('_')+1,tab_id.length);
for(var p = 0; p<= this.objCont.length; p++)
{
var cont = "cont_" + p;
if (p == cid)
{
this.objCont[i].document.getElementById(cont).style.display = 'block';
}
else
{
this.objTabs.document.getElementById(cont).style.display = 'none';
}
}
}
}
</script>
<div id="tabs" >
<span id="tabs_1">teb1</span>|
<span id="tabs_2">teb2</span>|
<span id="tabs_3">teb3</span>
<div id= "cont_1" style="display:none;">teb1</div>
<div id= "cont_2" style="display:none;">teb2</div>
<div id= "cont_3" style="display:none;">teb3</div>
</div>
<script language="javascript">
var a = new tabTest('tabs');
b = a.getInfo();
</script>
<body>
</body>
</html>