jquery做一个简单的选项卡

选项卡

效果如下：

css部分

<style>
	ul {
		list-style: none;
		padding: 0px;
		margin: 0px;
	}
		.wrap {
			width: 606px;
			height: 402px;
			margin: 50px auto;
			overflow: hidden;
			cursor: pointer;
		}
		.left, .center, .right {
			float: left;
			height: 400px;
			text-align: center;
			color: #fff;
		}
		.left {
			width: 100px;
			border: 1px solid #eee;
		}
		.left ul li, .right ul li{
			height: 79px;
			border-bottom: 1px solid #eee;
			font: 500 14px/79px "simsun";
			background: #06f;
		}
		.center {
			width: 400px;
			border: 1px solid #eee;
		}
		.center ul li {
			width: 400px;
			font: 700 30px/400px "microsoft yehei";
			background-color: #0fc;
		}
		.right {
			width: 100px;
			border: 1px solid #eee;
		}
	</style>

body部分

<div class="wrap">
		<div class="left">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
		<div class="center">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
			</ul>
		</div>
		<div class="right">
			<ul>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
			</ul>
		</div>
	</div>
	<script src="lib/jquery/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			$(".left li").mouseenter(function(){
				var index = $(this).index();
				$(this).css("backgroundColor","#09f").siblings().css("backgroundColor","#06f");
				$(".center li").eq(index).show().siblings().hide();
			});
			$(".left li").mouseleave(function(){
				$(this).css("backgroundColor","#06f");
			});
			$(".right li").mouseenter(function(){
				var index = $(this).index()+5;
				$(this).css("backgroundColor","#09f").siblings().css("backgroundColor","#06f");
				$(".center li").eq(index).show().siblings().hide();
			});
			$(".right li").mouseleave(function(){
				$(this).css("backgroundColor","#06f");
			});
		});
	</script>