Jquery实现tab切换demo

最新推荐文章于 2022-08-17 16:36:37 发布

故事仍在继续

最新推荐文章于 2022-08-17 16:36:37 发布

阅读量121

点赞数

文章标签： jquery tab

本文链接：https://blog.csdn.net/markya/article/details/105334588

版权

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

<!DOCTYPE html>

<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>
						我是菜单一 很开心认识大家，这是第一段文字
					</div>
				</div>
				<div class="tab">
					<div>
						我是菜单二 很开心认识大家，这是第二段文字
					</div>
				</div>
				<div class="tab">
					<div>
						我是菜单三 很开心认识大家，这是第三段文字
					</div>
				</div>
			</div>
 
		</div>
 
		<script type="text/javascript">
			(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>