实现选项卡切换效果并展示相对应的内容

简单的小demo为例，以下就是要实现的效果图

<style type="text/css">
	li {
		list-style: none;
		border: solid 1px;
	}
	
	/* 选项卡tab样式 */	
	.foodList {
		display: flex;
	}

	.foodList li {
		box-sizing: border-box;
		padding: 20px;
	}
	
	/* 点击选项卡添加选中样式 */
	.active {
		background: cyan;
	}
	
	/*点击选项卡展示对应的内容样式 */
	.foodItem li{
		width: 500px;
		box-sizing: border-box;
		padding: 20px;
	}
	
	.foodItem li span{
		font-size: 20px;
		color: #00FF00;
	}
	
	/* 点击选项卡显示对应内容 */
	.show {
		display: block;
	}
	
	/*其他没选中的默认为隐藏状态 */
	.hidden {
		display: none;
	}
</style>

<ul class="foodList">
	<li class="active" data-id="vegetbles">蔬菜</li>
	<li data-id="fruits">水果</li>
	<li data-id="snacks">小吃</li>
</ul>
<ul class="foodItem">
	<li id="vegetbles" class="show">
		<span>蔬菜品种：</span>
		白菜、萝卜、洋葱、豆腐
	</li>
	<li id="fruits" class="hidden">
		<span>水果品种：</span>
		苹果、榴莲、葡萄、香蕉
	</li>
	<li id="snacks" class="hidden">
		<span>小吃品种：</span>
		泡芙、臭豆腐、烤冷面、烧烤
	</li>
</ul>		

<script src="jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 点击选项卡
	$(".foodList li").on('click', function(e) {
		// 点击项添加选中样式
		$(e.target).attr("class", "active")
		// 其他项设置去除选中样式
		$(e.target).siblings().removeAttr("class")
		$.each($(".foodItem li"), function(i, item) {
			// 判断点击的选项卡data-id值和对应展示的id名是否一致
			if ($(e.target).data("id") == $(item).attr("id")) {
				// 将该对应展示项添加显示类名
				$(item).attr("class", "show");
				// 将其他项设置隐藏
				$(item).siblings().attr("class", "hidden");
			}
		})
	})
</script>