jquery 实现淘宝tab栏,相关jquery代码仅三行!!!

最新推荐文章于 2021-01-27 14:11:04 发布

黄大仙No.1

最新推荐文章于 2021-01-27 14:11:04 发布

阅读量240

点赞数

分类专栏： jQuery 文章标签： flex tab

本文链接：https://blog.csdn.net/qq_44378358/article/details/108238539

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>tab栏切换</title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.tab {
				display: flex;
				width: 900px;
				margin: 30px auto;
				flex-direction: column;
			}
			.tab .tab_list ul {
				display: flex;
				width: 100%;
				height: 50px;
				box-sizing: border-box;
				flex-direction: row;
			}
			.tab .tab_list ul li {
				flex: 1;
				height: 100%;
				display: flex;
				text-align: center;
				align-items: center;
				padding-left: 50px;
				background-color: pink;
				border-left: 1px solid red;
				border-top: 1px solid red;
				cursor: pointer;
			}
			.tab .tab_list ul li:last-child {
				border-right: 1px solid red;
			}
			.tab .tab_list ul .current {
				color:white;
				background-color: red;
			}
			.tab_con {
				height: 300px;
				border: 1px solid red;
			}
			.item {
				display: none;
			}

		</style>
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div class="tab_con">
				<div class="item" style="display: block">
					商品介绍#########################
				</div>
				<div class="item">
					规格与包装#######################
				</div>
				<div class="item">
					售后保障#########################
				</div>
				<div class="item">
					商品评价************************
					&nbsp;&napprox;<br>******************
					*****************
				</div>
				<div class="item">
					手机社区#########################
				</div>
			</div>
		</div>
		<script>
            $('.tab_list ul li').click(function () {
				$(this).addClass('current').siblings().removeClass('current');
	            $('.tab_con .item').eq($(this).index()).show().siblings().hide();
            })
		</script>
	</body>
</html>

黄大仙No.1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery 实现淘宝tab栏,相关jquery代码仅三行!!!

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>tab栏切换</title> <script src="js/jquery-3.5.1.min.js"></script> <style> * { margin: 0; padding: 0; } .tab {.
复制链接

扫一扫

专栏目录