标题栏（10.3.3）

最新推荐文章于 2024-09-26 01:42:12 发布

weixin_62480477

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量40

点赞数

文章标签： javascript html jquery

本文链接：https://blog.csdn.net/weixin_62480477/article/details/124908678

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	li {
	list-style-type: none;
	}

	.tab {
	width: 978px;
	margin: 100px auto;
	}

	.tab_list {
	height: 39px;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
	}

	.tab_list li {
	float: left;
	height: 39px;
	line-height: 39px;
	padding: 0 20px;
	text-align: center;
	cursor: pointer;
	}

	.tab_list .current {
	background-color: #c81623;
	color: #fff;
	}

	.item_info {
	padding: 20px 0 0 20px;
	}

	.item {
	display: none;
	}
	</style>
	<script src="jquery-3.3.1.min.js"></script>
	</head>
	<body>
	<div class="tab">
	<div class="tab_list">
	<ul>
	<li class="current">商品介绍</li>
	<li>规格与包装</li>
	<li>售后保障</li>
	<li>商品评价（50000）</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">商品评价（50000）模块内容</div>
	<div class="item">手机社区模块内容</div>
	</div>
	</div>
	<script>
	$(".tab_list li").click(function () {
	$(this).addClass("current").siblings().removeClass("current");
	var index = $(this).index();
	console.log(index);
	// 让内容区域里相应索引号的item显示，其余的item隐藏
	$(".tab_con .item").eq(index).show().siblings().hide();
	});
	</script>
	</body>
	</html>