用jQuery实现table切换_jqgrid 实现tab-CSDN博客

本文链接：https://blog.csdn.net/zgq_sir/article/details/103889431

本文介绍如何使用HTML和jQuery构建一个简单的Tab选项卡组件，包括HTML结构、CSS样式和jQuery交互代码，实现点击标题切换内容的功能。

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

首先将html标签写出

<div class="tabs">
	<div class="title active">标题1</div>
	<div class="title">标题2</div>
	<div class="title">标题3</div>
	<div class="content">内容1</div>
	<div class="content">内容2</div>
	<div class="content">内容3</div>
</div>

接着写入一些样式

.tabs .title{ 
			display: inline-block;
			width: 50px;line-height: 30px;
			text-align: center;
				}
			.tabs .content{
				width: 300px;height: 300px;
				background-color: orange;
				display: none;
			}
			.active{
				background-color: orange;
				color:#fff;
			}
			.tabs :nth-of-type(4){
				display: block;
			}

引入jQuery文件，并写入jqery代码： js文件路径根据自己情况设置

<script src="./js/jquery-3.3.1.js"></script>
<script>
//思路1.单机title 切换选项卡
//	2.将active 去掉，当前添加active removeClass addClass
//	3.之前显示的content，当前对应title num个content显示  show hide
	$(function(){
		$(".tabs .title").click(function(){
		//获取是第几个单机了
		var num = $(".tabs .title").index($(this));
		//之前有active的兄弟元素，去掉active
		$(this).siblings(".active").removeClass("active");
		//单机对象添加active
		$(this).addClass("active");
		//之前显示的cntent隐藏
		$(".tabs .content:visible").hide();
		//动态的创建一个显示器
		var str=`.tabs .content:eq(${num});`
		//显示对应的content
		$(str).show();
})
})
</script>