tab切换（用jQuery实现）?

页面中经常用到的tab栏，来分类展示内容

我认为掌握tab栏切换算是从静态页面到动态页面所迈出的第一步，并且在以后的工作中(jQuery框架开发)会作为jQuery中的常用事件和方法，反复的使用，所以掌握tab栏切换至关重要！！！

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>jQuery tab切换</title> 
<style> 
	body,blockquote,ul,li,h1,h2,h3,h4,h5,p,textarea,form,table,tr,td,input,button,div,dd,dt,dl{
		margin:0;
		padding:0;
	}
	li {
		list-style:none;
	}
	.app {
		width:1200px;
		margin:20px auto;
	}
	.app .app_div_tab ul {
		display:flex;
	}
	.app .app_div_tab ul li {
		width:120px;
		height:40px;
		line-height:40px;
		text-align:center;
		background-color:#fff;
		color:#000;
	}
	.app .app_div_tab ul li.active {
		background-color:#23A8F2;
		border-radius:5px 5px 0px 0px;
		color:#fff;
	}
	.app_div_box {
		width:100%;
		height:420px;
		border:1px solid #ccc;
	}
	.app .app_div_box_item {
		height:200px;
		font-size:15px;
		display:none;
	}
</style>
</head>
<body>
<div class="app">
	<div class="app_div_tab">
		<ul></ul>
	</div>
	<div class="app_div_box">
	</div>
</div>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	//模拟后台-tab中的数据
	var arr = [
		{id:0,name:"html+css",content:'内容1',},
		{id:1,name:"javascript",content:'内容2',},
		{id:2,name:"jQuery",content:'内容3',},
		{id:3,name:"BootStrap",content:'内容4',},
		{id:4,name:"Node",content:'内容5',},
		{id:5,name:"Vue",content:'内容6',},
		{id:6,name:"React",content:'内容7',},
	];
	
	$(".app_div_tab ul").empty(); //从被选元素中删除子元素
	$(".app_div_box").empty(); //从被选元素中删除子元素
	for(var i=0;i<arr.length;i++){
		var li = ''+arr[i].name+'
';
		var div= ''+arr[i].content+'
'
		if(i==0) {
			var li = ''+arr[i].name+'
';
			var div= ''+arr[i].content+'
'
			$(".app_div_tab ul").append(li);
			$(".app_div_box").append(div);
		 } else {
			 $(".app_div_tab ul").append(li);
			 $(".app_div_box").append(div);
		 } 
	}
	
	$(document).on("click",".app .app_div_tab ul li",function() {
		var i = $(this).index();
		$(this).addClass("active").siblings().removeClass("active");
		$(".app .app_div_box_item").eq(i).show().siblings().hide()
	});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

考察点

1.jQuery - 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

2.jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

3.jQuery on() 方法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

4.jQuery addClass() 方法

addClass() 方法向被选元素添加一个或多个类名。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
提示：如需添加多个类，请使用空格分隔类名。

5.jQuery removeClass() 方法

removeClass() 方法从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。

6.jQuery 杂项 index() 方法

ndex() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注意：如果未找到元素，index() 将返回 -1。

7.jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

相关阅读:
YOLOv8-Seg改进：Backbone改进 |Next-ViT堆栈NCB和NTB 构建先进的CNN-Transformer混合架构
 深度剖析堆及代码实现
 微信小程序全局水印组件
 Elasticsearch实现检索词自动补全(检索词补全，自动纠错，拼音补全，繁简转换) 包含demo
解决vue点击按钮刷新页面的一个bug
YOLOv8改进 | 注意力机制 | 添加混合局部通道注意力——MLCA【原理讲解】
Cn2线路异常采用Nginx反代灾备解决方案
 【Python 千题 —— 基础篇】判断布尔值
 语音芯片NV040D在电动车的防盗应用
 048：vue+openlayers鼠标click显示企业名片（代码示例）
原文地址：https://blog.csdn.net/weixin_45651609/article/details/126368456