原生js 实现tab切换二

	
		
		
	
	
	
		

			

				
第1个页面
				
第2个页面
				
第3个页面
				
第4个页面
				
第5个页面
			
			

				
我是第1个页面的内容
				
我是第2个页面的内容
				
我是第3个页面的内容
				
我是第4个页面的内容
				
我是第5个页面的内容
			
		
		
	

//网页运行时加载
window.onload = function() {
	var tabBox = document.getElementById("tabBox");
	fTabBox(tabBox);
}

//tab切换盒子的动效
function fTabBox(tabBox) {
	//获取到tab标题的元素节点
	var tabTitle = tabBox.getElementsByClassName("tabTitle")[0];
	//获取的tab内容的元素节点
	var tabCon = tabBox.getElementsByClassName("tabCon")[0];
	fSwitchTo(tabTitle, tabCon);
}

//tab切换的动效
function fSwitchTo(tabTitle, tabCon) {
	//获取到标题的所有li元素节点个数
	var tabTitleLisNum = tabTitle.childElementCount;
	//获取到tab标题元素节点里面所有li
	var tabTitleLis = tabTitle.children;

	//给每个tab标题的每个li添加点击事件
	for(var i = 0; i < tabTitleLisNum; i++) {
		tabTitleLis[i].onclick = function() {
			var index = -1;
			index = fGetSameIndex(tabTitle, this);
			fSetTabCon(tabCon, index);
		}
	}
}

//获取tab内容模块下标和点击的tab标题li下标一致 内容模块
function fSetTabCon(tabCon, t) {
	//获取tab内容里面的所有li元素节点个数
	var tabConLisNum = tabCon.childElementCount;
	//获取tabBox元素节点
	var tabBox = document.getElementById("tabBox");
	//获取tabBox盒子的宽度
	var boxWidth = tabBox.offsetWidth;
	//定义起始下标
	var startIndex = 0;
	//定时器
	var timer = null;
			//开始位置
			var startPosition = -(startIndex* boxWidth);
			//结束位置
			var endPosition = -(t * boxWidth); //因为tabBox有边框的原因所以移动的时候减去相应的距离
			//tabCon.style.marginLeft = leftValue + 'px'
			var lead = endPosition - startPosition;
			clearInterval(timer);
			timer = setInterval(function(){
			//等比例滑动
			startPosition+= lead/200; 
				if (startPosition == endPosition) {
					//清理定时
					clearInterval(timer);
					//记录下一次的的开始位置
					startIndex = t;
				}
				tabCon.style.marginLeft = (startPosition + 2* t)+"px";	
			},10);	
	
}

//获取tab内容模块下标和点击的tab标题li下标一致 下标
function fGetSameIndex(tabTitle, t) {
	//获取到标题的所有li元素节点个数
	var tabTitleLisNum = tabTitle.childElementCount;
	//获取到tab标题元素节点里面所有li
	var tabTitleLis = tabTitle.children;

	for(var j = 0; j < tabTitleLisNum; j++) {
		if(tabTitleLis[j] === t) {
			index = j;
		}
	}
	return index;
}
```

转载于:https://my.oschina.net/u/3382800/blog/868413