tab栏切换制作(jquery版本）

最新推荐文章于 2023-08-05 09:27:03 发布

积沙成塔——

最新推荐文章于 2023-08-05 09:27:03 发布

阅读量141

点赞数 1

分类专栏： jquery基础文章标签： jquery jquery

本文链接：https://blog.csdn.net/qq_45308912/article/details/121441229

版权

jquery基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在这里插入图片描述
效果展示：

代码展示：

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

			#container {
				/* background-color: red; */
				width: 800px;
				margin: 100px auto;
			}

			#header {
				/* background-color: pink; */
			}

			ul {
				list-style: none;
				display: flex;
				flex-flow: row nowrap;
				height: 50px;
				line-height: 50px;
			}

			li {
				flex-grow: 1;
				border: 1px solid skyblue;
				background-color: lightgray;
				/* text-align: center; */
				/* background-color: skyblue; */
			}

			.item {
				display: none;
			}

			.current {
				background-color: pink;
			}

			.show {
				display: block;
			}
		</style>
		<script src="js/new_file.js"></script>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div id="footer">
				<div class="show">商品介绍</div>
				<div class="item">规格预包装</div>
				<div class="item">售后保障</div>
				<div class="item">商品评价</div>
				<div class="item">手机社区</div>
			</div>
		</div>
		<script>
			$(function() {
				$("#header ul li").mouseover(function() {
					//当鼠标放到相应li上面的时候，li添加一个类，其余li兄弟元素移除这个类
					$(this).addClass("current").siblings("li").removeClass("current");
					//当鼠标放到相应li上面的时候，获取当前li的索引
					var $index = $(this).index();
					console.log($index);
					//通过索引来展示相应的数据
					$("#footer div").eq($index).show().siblings("div").hide();
				})
			})
		</script>
	</body>
</html>