這幾天忙於北京移動這邊CRM新版本統一框架高保真文檔的開發，所以最近涉及js腳本的開發很少，昨天開始設計到統一框架的仿ios tabs功能的開發，開發以前遇到以下問題：
1.鑑於項目的需要，不能使用jquery等框架。
2.要使用原生的js開發兼容ie個版本的ios tabs功能。
廢話少說上代碼：
<!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><title>customerView</title>
<style>
.custom{width:98%; margin:3px auto auto;}
.custom .cusBox_title{width:100%; height:26px; background:url(NewTab_bg.png) repeat-x; border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; padding-top:3px;}
.cusBox_newTab{height:24px; margin:0px auto auto;}
.NewTab_l{width:4px; height:24px; background:url(NewTab_l.gif) no-repeat left center;}
.NewTab_c{height:24px; background:url(NewTab_c.gif) repeat-x left center;}
.NewTab_r{width:4px; height:24px; background:url(NewTab_r.gif) no-repeat right center;}
.NewTab_wrap{margin-top:2px; width:100%; height:22px; position:relative; overflow:hidden;}
.NewTab_but_list{width:66px; position:absolute; height:19px; text-align:center; color:#748db0; font-size:12px; list-style:none; line-height:19px; cursor:pointer; z-index:1; top:0PX;}
.list01{left:1px;}
.list02{left:90px;}
.list03{left:180px;}
.list04{left:270px;}
.NewTab_but_hover{width:166px; height:29px; position:absolute; left:1px; top:0px; /*text-align:center; line-height:19px; */background:url(NewTab_bg_1.gif) no-repeat; z-index:0;}
.custom .cusBox_con{width:100%;}
.NewTab_frame{border:1px solid #c6c6c6; border-top:none;}
</style>
</head>
<body>
<div class="custom">
<div class="cusBox_title">
<div class="cusBox_newTab" style="width:368px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="24px"><tr>
<td class="NewTab_l"></td>
<td class="NewTab_c" width="360px">
<div class="NewTab_wrap" id="NewIosTab1">
<div class="NewTab_but_list list01" value="http://www.baidu.com">營銷列表</div>
<div class="NewTab_but_list list02" value="http://www.douban.com">服務請求</div>
<div class="NewTab_but_list list03" value="http://www.qq.com">集團客戶</div>
<div class="NewTab_but_list list04" value="http://www.google.com.cn">渠道代理</div>
<div class="NewTab_but_hover" id="NewTab_listActive1"></div>
</div><!--end NewTab_wrap-->
</td>
<td class="NewTab_r"></td>
</tr></table>
</div><!--end cusBox_newTab-->
</div><!--end cusBox_title-->
<div class="cusBox_con" style="height:500px;">
<iframe src="http://www.baidu.com" frameborder="0" height="500px" width="100%" id="NewTab_frame1" class="NewTab_frame"></iframe>
</div><!--end cusBox_con-->
</div><!--end custom_box-->
<script language="javascript">
var NewIosTabs=function(){
return{
checkEffe:function(id1,id2,id3){
var NewIosTabNodes = document.getElementById(id1).getElementsByTagName("div");//getElementsByName("name")只對表單元素起作用
var NTL_Active = document.getElementById(id2);
var NTL_frame = document.getElementById(id3);
var NITNodesNum =NewIosTabNodes.length-1;
for(var i=0; i<NITNodesNum; i++){
NewIosTabNodes[i].οnclick=function(){
var NewIosNodesLeft = this.offsetLeft;
var urlVal=this.getAttribute("value");
NTL_Active.style.left=NewIosNodesLeft+"px";
NTL_frame.setAttribute("src",urlVal);
}
}
}
}
}();
NewIosTabs.checkEffe("NewIosTab1","NewTab_listActive1","NewTab_frame1");
</script>
</body>
</html>