tab切换（jq方法）

<script src="jquery-3.4.1.min.js"></script>

*{
    margin: 0;
    padding: 0;
	list-style: none;
}
ul{
	width: 408px;
	height: 100px;
	margin: auto;
	margin-top: 100px;
	text-align: center;
}
ul li{
	width: 100px;
	height: 100px;
	line-height: 100px;
	float: left;
	border: 1px solid gainsboro;
}
#box div{
	width: 400px;
	height: 400px;
	margin: auto;
	background: gainsboro;
	display: none;
}
.b{
	background: lavender;
}

<ul>
	<li class="b">a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
</ul>
<div id="box">
	<div>1</div>
	<div>4</div>
	<div>2</div>
	<div>3</div>
</div>

$(function(){
     //点击事件
	$("ul>li").click(function(){
	//addClass()添加class属性值  相当于  classList.remove()
	//removeClass()移除class属性值   相当于   classList.add()
	$(this).addClass('b').siblings().removeClass('b');//点击时背景色改变
	//index()获取当前元素下标
	var n=$(this).index();//当前元素下标
	//eq()对应下标的元素  show()显示  siblings()兄弟元素  hide()隐藏
	$('#box div').eq(n).show().siblings().hide();//下标与上面相同的盒子显示其余盒子隐藏
	})
})