实用功能小记-jQuery实现Tab切换功能_自定义tab滑动切换效果 jquery-CSDN博客

本文链接：https://blog.csdn.net/qq_43513170/article/details/89149656

今天记录一下jQuery实现Tab切换的功能，不为别的，只是以后遇到了可以直接拿来用。

直接看效果：

在这里插入图片描述

直接看源码：

<!DOCTYPE html>
<!--
	author ： tiger
	date ： 2019
	aim ： csdn Test
	bug ： tested
-->
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#all_style {
				width: 400px;
				height: 300px;
				border: 2px solid #3F3F3F;
			}
			
			#all_style div:nth-child(1) {
				width: 100%;
				height: 100px;
			}
			
			#all_style div:nth-child(2) {
				width: 100%;
				height: 200px;
				text-align: center;
			}
			
			ul li {
				list-style: none;
				float: left;
				margin-right: 3rem;
			}
			
			.active {
				border-bottom: 2px solid red;
			}
			
			.tab {
				display: none;
			}
			
			.selected {
				display: block;
			}
		</style>
	</head>
 
	<body>
		<div id="all_style">
			<div>
				<ul>
					<li class="active">菜单一</li>
					<li>菜单二</li>
					<li>菜单三</li>
				</ul>
			</div>
			<div>
				<div class="tab selected">
					<div>
						csdn博友好，我是菜单一 很开心认识大家，这是第一段文字
					</div>
				</div>
				<div class="tab">
					<div>
						csdn博友好，我是菜单二 很开心认识大家，这是第二段文字
					</div>
				</div>
				<div class="tab">
					<div>
						csdn博友好，我是菜单三 很开心认识大家，这是第三段文字
					</div>
				</div>
			</div>
 
		</div>
 
		<script type="text/javascript">
			/*
			 * params ： no
			 * funcs : click
			 * aim : 控制Tab菜单的切换
			 * 
			 */
			$(function() {
				$("ul li").click(function() {
					$(this).addClass('active').siblings('li').removeClass('active');
					var index = $(this).index();
					//显示对应的div
					$('.tab').eq(index).addClass('selected').siblings('div').removeClass('selected');
				})
			});
		</script>
	</body>
 
</html>