jq实现选项卡切换

css:部分

  .boxli li {
		float: left;
		list-style: none;
		padding-left: 50px;
	}
	
	li.active {
		background: #fafafa;
	}
	
	.box_content div {
		display: none;
	}
	
	.box_content div.active {
		display: block;
	}
	.clearfix::after {
		content: "";
		height: 0;
		display: block;
		clear: both;
		*zoom: 1;
	}

##html部分

<div class="box">
			<ul class="boxli clearfix">
				<li class="active">1215</li>
				<li>1215</li>
				<li>1215</li>
			</ul>
			<div class="box_content">
				<div class="active">15616513</div>
				<div class="">fsdfsdfsd</div>
				<div class="">czczvzsdv</div>
		     </div>
</div>

js部分

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
   $(".boxli li").click(function(){
				$(this).addClass("active").siblings().removeClass("active");
				var i = $(this).index();		
		$(".box_content").children().eq(i).addClass("active").siblings().removeClass("active");		                
    })
</script>