Jquery实现京东tab切图

主要是用jquery实现tab切换，显示不同的内容。也可以用原生js实现，但是实现方式比较繁琐，这里暂时不写原生js实现。jquery相对代码少而且易于理解。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab切换内容</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.tab_top {
			/*position:relative;*/
			margin: 0 auto;
			height: 500px;
			width: 300px;
			font-size: 16px;
			font-family: "微软雅黑";		
		}
		
		.tab_head {
			margin: 0 auto;
			height: 20px;
			line-height: 20px;
			color: rgb(175, 175, 175);
			background-color: rgb(247, 247, 247);
		}

		.tab_top .tab_head_item {
			width: 92px;
		}

		ul li {
			list-style: none;
			display: inline-block;
		}

		.tab_body .tab_body_item {
			font-size: 15px;
			display: none;
			color: rgb(51, 51, 51);
		}

/*方案一  start */
	/*	.tab_head_item span{
			font-size: 16px;
			color: black;
		}

		.tab_head_item div {
			position: absolute;
			float: left;
			display: none;
		}*/
/*方案一  end */
	</style>
	<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
</head>
<body>
	 <div class="tab_top">
		<div class="tab_head">
			<ul>
				<li class="tab_head_item">手机通讯录</li>
				<li class="tab_head_item">大家电</li>
				<li class="tab_head_item">厨房小电</li>
			</ul>
		</div>
		<div class="tab_body">
		 	<div class="tab_body_item"><span class="tab_item_name">&nbsp;&nbsp;Apple iPhone X (A1865) 64GB 银色 移动联通电信4G手机Apple iPhone X (A1865) 64GB 银色 移动联通电信4G手机Apple iPhone X (A1865) 64GB 银色 移动联通电信4G手机Apple iPhone X (A1865) 64GB 银色 移动联通电信4G手机Apple iPhone X (A1865) 64GB 银色 移动联通电信4G手机Apple iPhone X (A1865) 64GB 银色 移动联通电信4G手机</span></div>
			<div class="tab_body_item"><span class="tab_item_name">&nbsp;&nbsp;小米（MI）电视 32英寸 智能WiFi网络 高清液晶 平板电视机（黑色）4A L32M5-AZ小米（MI）电视 32英寸 智能WiFi网络 高清液晶 平板电视机（黑色）4A L32M5-AZ小米（MI）电视 32英寸 智能WiFi网络 高清液晶 平板电视机（黑色）4A L32M5-AZ小米（MI）电视 32英寸 智能WiFi网络 高清液晶 平板电视机（黑色）4A L32M5-AZ</span></div>
			<div class="tab_body_item"><span class="tab_item_name">&nbsp;&nbsp;康佳(KONKA）KEO-20AS37 电磁炉 家用 智能多功能磁炉康佳(KONKA）KEO-20AS37 电磁炉 家用 智能多功能磁炉康佳(KONKA）KEO-20AS37 电磁炉 家用 智能多功能磁炉康佳(KONKA）KEO-20AS37 电磁炉 家用 智能多功能磁炉</span></div> 
		</div>
	</div>
<!-- 方案一 start -->
<!-- 	<div class="tab_top">
		<div class="tab_head">
			<ul>
				<li class="tab_head_item">
					<span>手机通讯录</span>
					<div>Apple iPhone X (A1865) 64GB 银色 移动联通电信4G手机</div>
				</li>
				<li class="tab_head_item">
					<span>大家电</span>
					<div>小米（MI）电视 32英寸 智能WiFi网络 高清液晶 平板电视机（黑色）4A L32M5-AZ</div>
				</li>
				<li class="tab_head_item">
					<span>厨房小电</span>
					<div>康佳(KONKA）KEO-20AS37 电磁炉 家用 智能多功能磁炉</div>
				</li>
			</ul>
		</div>
	</div> -->
	<!-- 方案一 end -->
	<script>
		$(function() {
			// 方案二 复杂 笨方法
			// $(".tab_head li").eq(0).click(function() {
			// 	$(".tab_body_item").eq(0).show();
			// 	$(".tab_body_item").eq(1).hide();
			// 	$(".tab_body_item").eq(2).hide();
			// });	

			// $(".tab_head li").eq(1).click(function() {
			// 	$(".tab_body_item").eq(1).show();
			// 	$(".tab_body_item").eq(0).hide();
			// 	$(".tab_body_item").eq(2).hide();
			// });

			// $(".tab_head li").eq(2).click(function() {
			// 	$(".tab_body_item").eq(2).show();
			// 	$(".tab_body_item").eq(0).hide();
			// 	$(".tab_body_item").eq(1).hide();
			// });

		$(".tab_head li").click(function() {
			var index = $(this).index();
			$(".tab_head li").eq(index).parent().parent().siblings().children().eq(index).show().siblings().hide();
		});


			// 方案一
			// $(".tab_head li").click(function() {
			// 	$(this).siblings().children("div").hide();
			// 	$(this).children("div").css("width","300px");
			// 	$(this).children("div").show();
			// });	
		});
	</script>
</body>
</html>

这里用了三种方式实装，在写的时候，发现页面结构真的很重要。

方案一的结构是一级目录，和二级目录在同一个div中，这样实现的效果不太好。点击一级目录的时候，其下面的内容显示和一级目录的左对齐是一样的，导致效果比较丑陋。

方案二是在和方案三的html结构是一样的，但是，jquery代码实现的时候，比较死板，无法灵活运用。

方案三，相对简单，易于理解。如果能够想到更好的方案再贴出来吧。

PS:主要是为了学习jquery封装的函数，所以页面效果做的不太好看。有精力的同学可以尝试做的跟京东的效果一样最好。

运行效果：

点击事件开始前：

点击手机通讯录

点击大家电：

Jquery实现京东tab切图

猜你喜欢