原生js 实现tab切换二

原创
2017/03/27 15:37
阅读数 40
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body,ul,li {
			margin: 0;
			padding: 0;
		}
		.tabBox {
			width: 1000px;
			margin: 10px auto;
			border: 1px solid #CCCCCC;
			box-sizing: border-box;
			overflow: hidden;
			
		}
		ul,li {
			list-style: none;
		}
		.tabTitle {
			display: flex;
			border-bottom: 1px solid #CCCCCC;
		}
		.tabTitle li {
			float: left;
			flex: 1;
			text-align: center;
		}
		.clearfix:after,.clearfix:before {
			content: " ";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		ul li:nth-child(1) {
			background: red;
		}
		ul li:nth-child(2) {
			background: yellow;
		}
		ul li:nth-child(3) {
			background: blue;
		}
		ul li:nth-child(4) {
			background: green;
		}
		ul li:nth-child(5) {
			background: olive;
		}
		ul:nth-child(2) {
			height: 240px;
			width:500%;
			z-index: -1;
		}
		ul:nth-child(2) li {
			float: left;
			width: 20%;
			height: 100%;
		}
	</style>
	<body>
		<div class="tabBox" id="tabBox">
			<ul class="tabTitle clearfix" id="tabTitle">
				<li>第1个页面</li>
				<li>第2个页面</li>
				<li>第3个页面</li>
				<li>第4个页面</li>
				<li>第5个页面</li>
			</ul>
			<ul class="tabCon clearfix" id="tabCon">
				<li>我是第1个页面的内容</li>
				<li>我是第2个页面的内容</li>
				<li>我是第3个页面的内容</li>
				<li>我是第4个页面的内容</li>
				<li>我是第5个页面的内容</li>
			</ul>
		</div>
		<script src="tabSwitch.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
//网页运行时加载
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;
}
```
展开阅读全文
打赏
3
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
3
分享
返回顶部
顶部