封装一个简单的tab切换效果

前端-文龙刚

于 2022-12-15 10:04:53 发布

阅读量317

点赞数

分类专栏： Javascript 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_17211063/article/details/128324962

版权

Javascript 专栏收录该内容

84 篇文章 1 订阅

订阅专栏

闲扯：以前用JQ写一些页面效果的时候，开始写的比较繁琐，慢慢熟悉了后可以利用封装来让代码更简洁，现在JQ慢慢已经淡出视野了，基本都在用vue或React等一些流行框架了，回忆下从前吧

这是最终的效果图

首先看最基础的写法


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>利用AJAX实现TAB切换效果</title>
	<style type="text/css">
		*{margin:0;padding:0;list-style-type:none;}
		.clearfix {clear: both;}
		.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;clear:both;}
		.tab{margin:20px auto;width:600px;height:600px;}
		.tab-tit{height:60px;line-height:60px;background-color:#ddd;}
		.tab-tit li{width:33.3333%;float:left;text-align:center;cursor:pointer;}
		.tab-tit li.on{background-color:red;color:#fff;}
		.tab-con{width:100%;height:540px;}
		.tab-con .tab-con-list{width:100%;height:540px;line-height:540px;text-align:center;background-color:#f5f5f5;display:none;}
	</style>
</head>
<body>
	<div class="tab">
		<div class="tab-tit">
			<ul class="clearfix">
				<li class="on">空军</li>
				<li>陆军</li>
				<li>海军</li>
			</ul>
		</div>
		<div class="tab-con">
			<div class="tab-con-list" style="display:block;">空军</div>
			<div class="tab-con-list">陆军</div>
			<div class="tab-con-list">海军</div>
		</div>
	</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('.tab-tit li').on('click', function() {
			var index = $(this).index();
			$(this).addClass('on').siblings().removeClass('on');
			$('.tab-con .tab-con-list').eq(index).show().siblings().hide();
		});
	});
</script>

缺点：页面上有几个tab切换效果，你就得写多少个js代码，产生一些冗余代码

现在看封装后的切换效果

先看效果：这是一个页面上放了两个tab切换

代码如下


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>利用AJAX实现TAB切换效果</title>
	<style type="text/css">
		*{margin:0;padding:0;list-style-type:none;}
		.clearfix {clear: both;}
		.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;clear:both;}
		.tab{margin:20px auto;width:600px;height:300px;}
		.tab-tit{height:60px;line-height:60px;background-color:#ddd;}
		.tab-tit li{width:33.3333%;float:left;text-align:center;cursor:pointer;}
		.tab-tit li.on{background-color:red;color:#fff;}
		.tab-con{width:100%;height:240px;}
		.tab-con .tab-con-list{width:100%;height:240px;line-height:240px;text-align:center;background-color:#f5f5f5;display:none;}
	</style>
</head>
<body>
	<div class="tab tab1">
		<div class="tab-tit">
			<ul class="clearfix">
				<li class="on">空军</li>
				<li>陆军</li>
				<li>海军</li>
			</ul>
		</div>
		<div class="tab-con">
			<div class="tab-con-list" style="display:block;">空军</div>
			<div class="tab-con-list">陆军</div>
			<div class="tab-con-list">海军</div>
		</div>
	</div>
	<div class="tab tab2">
		<div class="tab-tit">
			<ul class="clearfix">
				<li class="on">空军</li>
				<li>陆军</li>
				<li>海军</li>
			</ul>
		</div>
		<div class="tab-con">
			<div class="tab-con-list" style="display:block;">空军</div>
			<div class="tab-con-list">陆军</div>
			<div class="tab-con-list">海军</div>
		</div>
	</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">	
	$(function() {
		$.jstab = function(tab, ton, item) {
			$(tab).click(function() {
				this_tab = $(this);
				this_tab.addClass("on").siblings().removeClass("on");
				var index = this_tab.index();
				$(tab).parent().parent().parent().find(ton).find(item).eq(index).show().siblings().hide();
			});
		};
		$.jstab(".tab1 .tab-tit li", ".tab-con", ".tab-con-list");//第一个切换
		$.jstab(".tab2 .tab-tit li", ".tab-con", ".tab-con-list");//第二个切换
		//第一个参数为：需要点击的元素
		//第二个参数为：需要显示的内容区域最大的元素
		//第三个参数为：显示内容区域的每一项元素
	});
</script>