jquery实现tab切换简单好用

网上很多tab切换的方法，很多比较复杂，我写了一个非常简单实用的。直接上代码。

1690526205750

主要通过display：none，block。以及类选择器来实现。

首先引入jquery

 <script src="js/jquery.min.js"></script>复制

html部分

 <div>
	<!-- 导航栏部分 -->
	<ul class="table">
		<li class="tabActive">tab1</li>
		<li>tab2</li>
		<li>tab3</li>
		<li>tab4</li>
	</ul>
	<!-- 内容区域 -->
	<div class="content conAvtive">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
	<div class="content">4</div>
</div>复制

css部分

 <style>
	.table {
		display: flex;
	}
	li {
		width: 100px;
		text-align: center;
		list-style: none;
		cursor: pointer;
	}
	.content {
		display: none;
	}
	.conAvtive {
		display: block;
	}
	.tabActive {
		color: #ccb46c;
	}
</style>复制

js部分

 <script>
	$(".table li").on("click", function() {
		var divs = $(".content")
		var lis = $(".table li")
		lis.removeClass('tabActive')
		$(this).addClass('tabActive')
		for (var i = 0; i < lis.length; i ++) {
			if (lis[i] == this) {
				divs.removeClass('conAvtive')
				divs.eq(i).addClass('conAvtive')
			}
		}
	})
</script>复制

整体代码。

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.table {
			display: flex;
		}
		li {
			width: 100px;
			text-align: center;
			list-style: none;
			cursor: pointer;
		}
		.content {
			display: none;
		}
		.conAvtive {
			display: block;
		}
		.tabActive {
			color: #ccb46c;
		}
	</style>
	<body>
		<div>
			<!-- 导航栏部分 -->
			<ul class="table">
				<li class="tabActive">tab1</li>
				<li>tab2</li>
				<li>tab3</li>
				<li>tab4</li>
			</ul>
			<!-- 内容区域 -->
			<div class="content conAvtive">1</div>
			<div class="content">2</div>
			<div class="content">3</div>
			<div class="content">4</div>
		</div>
	</body>
	<!-- 引入本地jq -->
	<script src="js/jquery.min.js"></script>
	<script>
		$(".table li").on("click", function() {
			var divs = $(".content")
			var lis = $(".table li")
			lis.removeClass('tabActive')
			$(this).addClass('tabActive')
			for (var i = 0; i < lis.length; i ++) {
				if (lis[i] == this) {
					divs.removeClass('conAvtive')
					divs.eq(i).addClass('conAvtive')
				}
			}
		})
	</script>
</html>
复制

效果图
在这里插入图片描述

标签

jquery实现tab切换简单好用

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

npm使用淘宝镜像下载依赖包

搭建Nexus前端npm私服，上传发布npm包和下载依赖

npm install包提示安装成功，但项目目录中没有出现node_modules的解决方案

解决VUE3 Vite打包后动态图片资源不显示问题

vue基于sockjs-client stompjs实现websocket客户端

Vue 3 项目中导入外部的＜link＞和＜script＞资源

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<div>
	<!-- 导航栏部分 -->
	<ul class="table">
	<li class="tabActive">tab1</li>
	<li>tab2</li>
	<li>tab3</li>
	<li>tab4</li>
	</ul>
	<!-- 内容区域 -->
	<div class="content conAvtive">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
	<div class="content">4</div>
	</div>

	<style>
	.table {
	display: flex;
	}
	li {
	width: 100px;
	text-align: center;
	list-style: none;
	cursor: pointer;
	}
	.content {
	display: none;
	}
	.conAvtive {
	display: block;
	}
	.tabActive {
	color: #ccb46c;
	}
	</style>

	<script>
	$(".table li").on("click", function() {
	var divs = $(".content")
	var lis = $(".table li")
	lis.removeClass('tabActive')
	$(this).addClass('tabActive')
	for (var i = 0; i < lis.length; i ++) {
	if (lis[i] == this) {
	divs.removeClass('conAvtive')
	divs.eq(i).addClass('conAvtive')
	}
	}
	})
	</script>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<style>
	.table {
	display: flex;
	}
	li {
	width: 100px;
	text-align: center;
	list-style: none;
	cursor: pointer;
	}
	.content {
	display: none;
	}
	.conAvtive {
	display: block;
	}
	.tabActive {
	color: #ccb46c;
	}
	</style>
	<body>
	<div>
	<!-- 导航栏部分 -->
	<ul class="table">
	<li class="tabActive">tab1</li>
	<li>tab2</li>
	<li>tab3</li>
	<li>tab4</li>
	</ul>
	<!-- 内容区域 -->
	<div class="content conAvtive">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
	<div class="content">4</div>
	</div>
	</body>
	<!-- 引入本地jq -->
	<script src="js/jquery.min.js"></script>
	<script>
	$(".table li").on("click", function() {
	var divs = $(".content")
	var lis = $(".table li")
	lis.removeClass('tabActive')
	$(this).addClass('tabActive')
	for (var i = 0; i < lis.length; i ++) {
	if (lis[i] == this) {
	divs.removeClass('conAvtive')
	divs.eq(i).addClass('conAvtive')
	}
	}
	})
	</script>
	</html>

jquery实现tab切换简单好用

微信扫一扫：分享