js模拟iostabs的功能写法

最新推荐文章于 2025-05-17 14:27:04 发布

原创最新推荐文章于 2025-05-17 14:27:04 发布 · 643 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #list #function #tabs #border #url

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了如何利用原生JS实现与iOS风格相匹配的标签导航功能，并且该实现兼容了不同版本的IE浏览器。通过定制化的CSS样式和逻辑代码，成功解决了不能使用jQuery等框架的问题。

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