js模拟iostabs的功能写法

最新推荐文章于 2022-08-27 11:00:43 发布

lixp3

最新推荐文章于 2022-08-27 11:00:43 发布

阅读量592

点赞数

分类专栏： javascript 文章标签： class list function tabs border url

本文链接：https://blog.csdn.net/lxp1021/article/details/7495349

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

这几天忙于北京移动这边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>