Jquery realizes Jingdong tab cut map

Mainly use jquery to achieve tab switching to display different content. It can also be implemented with native js, but the implementation method is relatively cumbersome, and the native js implementation will not be written here for the time being. jQuery is relatively less code and easier to understand.

<!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>

There are three ways to implement it here. When writing, it is really important to find that the page structure is really important.

The structure of scheme 1 is that the first-level directory is in the same div as the second-level directory, which is not very effective. When clicking on the first-level directory, the content below it is displayed the same as the left-alignment of the first-level directory, resulting in an ugly effect.

Scheme 2 is the same as the html structure of scheme 3, but when the jquery code is implemented, it is relatively rigid and cannot be used flexibly.

Option three is relatively simple and easy to understand. If you can think of a better solution, please post it.

PS: The main purpose is to learn the functions encapsulated by jquery, so the page effect is not very good-looking. Students who are energetic can try to do the same thing as JD.com.

running result:

Before the click event starts:

Click on Phone Contacts

Click on Home Appliances:

Jquery realizes Jingdong tab cut map

Guess you like