tab切换（用jQuery实现）?

八点玩转前端

已于 2022-08-17 11:02:41 修改

阅读量1.8k

点赞数

分类专栏： jQuery 文章标签： jquery 前端

于 2022-08-17 10:38:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45651609/article/details/126368456

版权

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文详细讲解了如何使用jQuery实现tab切换，并强调了这一技能在jQuery框架开发中的重要性。主要探讨了jQuery中的关键方法，包括删除元素、添加元素、on()方法、addClass()方法、removeClass()方法、index()方法以及hide()和show()方法，这些都是实现tab切换的核心技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面中经常用到的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 = '<li>'+arr[i].name+'</li>';
		var div= '<div class="app_div_box_item">'+arr[i].content+'</div>'
		if(i==0) {
			var li = '<li class="active">'+arr[i].name+'</li>';
			var div= '<div class="app_div_box_item" style="display:block;">'+arr[i].content+'</div>'
			$(".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.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() 方法。