原生js实现的tab选项卡切换

K先生 2020-04-13 js特效2573

没什么多说的，就是最近在写一个后台管理模板，发现以前写的tab切换现在有点达不到自己心里的标准，所以就重新写了一个，本着拥抱原生js的原则，就放弃了jQuery。下面废话不多说，先看一下效果图吧：

原生js实现的tab选项卡切换-k先生个人博客

如果上面的效果你感觉还可以的话，那你就直接拿下面的代码就行了。代码不依赖任何插件，也就是说，您直接复制一下打开就能看效果啦。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>js实现tab切换</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			ul {
				list-style: none;
			}
			.container {
				margin: 100px;
			}
			.tab_ul {
				background-color: #5edbbe;
				overflow: hidden;
			}
			.tab_ul li {
				float: left;
				padding: 15px;
				cursor: pointer;
			}
			.tab_ul .active {
				color: #ec1818;
			}
			.tab_content {
				background-color: #F6F6F6;
				min-height: 250px;
				padding: 15px;
				overflow: hidden;
			}
			.tab_child {
				display: none;
				animation: hideTab 0.5s;
				-moz-animation: hideTab 0.6s;/* Firefox */
				-webkit-animation: hideTab 0.6s;/* Safari and Chrome */
			}
			@keyframes hideTab {
				0% {
					opacity: 0;
					transform: translate(200px, 0)
				}
				100% {
					opacity: 1;
					transform: translate(0, 0)
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<ul class="tab_ul">
				<li class="active">选项一</li>
				<li>选项二</li>
				<li>选项三</li>
			</ul>
			<div class="tab_content">
				<div class="tab_child" style="display: block;">
					<p>“你羡慕我 一身潇洒 无牵无挂，我却羡慕你，有家、有她、有人等你回家”</p>
				</div>
				<div class="tab_child">
					<p>我上了那么多年学，熬了那么多夜，做那么多习题，顶着各种各样的压力，参加各种残酷的考试，谈恋爱，分手，工作，加班。我这么辛苦，竟然是为了成为一个普通人......——《生而为人》</p>
				</div>
				<div class="tab_child">
					<p>“有人问我暗恋是什么感觉，我下意识的回答：好像是在商店看到喜欢的玩具，想买，钱不够，努力存钱，回头去看的时候发现涨价了，更加拼命的存钱，等我钱攒够的时候，再回去发现已经被买走了。希望不会在垃圾堆看到这玩具，不然我依然会把它捡起来。”</p>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var tab = document.getElementsByClassName('tab_ul')[0];
			var tabList = tab.getElementsByTagName('li');
			var tabChild = document.getElementsByClassName('tab_child');
			for (let i = 0; i < tabList.length; i++) {
				tabList[i].onclick = function() {
					tabInit()
					this.classList.add('active');
					tabChild[i].setAttribute('style', 'display:block');
				}
			}
			//初始化tab
			function tabInit() {
				for (let i = 0; i < tabList.length; i++) {
					tabList[i].classList.remove('active')
					tabChild[i].setAttribute('style', 'display:none')
				}
			}
		</script>
	</body>
</html>

另外需要多说一点的是，这个tab选项卡实现的动态效果是靠css3的animation和keyframes完成的，上面有代码体现，代码很简短，自己研究一下吧。

作者：K先生本文地址：http://www.gold404.cn/info/51

上一篇：宝塔面板将根域名301重定向至www域名（超简单）

下一篇： simditor富文本编辑器最新最简单的使用方法

原生js实现的tab选项卡切换

文章评论

欢迎您，K先生

评论列表