原生js 实现tab切换

最新推荐文章于 2023-05-26 15:57:06 发布

chenxin90111

最新推荐文章于 2023-05-26 15:57:06 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3382800/blog/868407

版权

<!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;
	for(var k = 0; k < tabConLisNum; k++) {
		if(k === t) {
			var leftValue = -(index * boxWidth - 2 * k); //因为tabBox有边框的原因所以移动的时候减去相应的距离
			tabCon.style.marginLeft = leftValue + 'px'
		}
	}
}

//获取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/868407