jQuery水平导航栏切换图片当点击水平导航栏选项时，该选项出现红色上边框。并且对应下面图片内容更换。需要给水平导航栏

当点击水平导航栏选项时，该选项出现红色上边框。并且对应下面图片内容更换。需要给水平导航栏选项绑定两个事件。
通过添加类进行实现。

代码：

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			.wrapper {
				width: 1000px;
				height: 475px;
				margin: 0 auto;
				margin-top: 100px;
			}
			
			.tab {
				border: 1px solid #ddd;
				border-bottom: 0;
				height: 36px;
				width: 320px;
			}
			
			.tab li {
				position: relative;
				float: left;
				width: 80px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				cursor: pointer;
				border-top: 4px solid #fff;
			}
			
			.tab span {
				position: absolute;
				right: 0;
				background: #ddd;
				width: 1px;
				height: 34px;
				overflow: hidden;
			}
			
			.products {
				width: 1002px;
				border: 1px solid #ddd;
				height: 476px;
			}
			
			.products .main {
				float: left;
				display: none;
			}
			
			.products .selected {
				display: block;
			}
			
			.tab li.active {
				border-color: red;
				border-bottom: 0;
			}
		</style>
		<script src="js/jquery.js"></script>
		<script>
			$(function() {

				$(".tab-item").mouseenter(function() {
					//两个事件
					$(this).addClass("active").siblings().removeClass("active");
					var index = $(this).index();
					$(".main").eq(index).addClass("selected").siblings().removeClass("selected");
				});

			});
		</script>

	</head>

	<body>
		<div class="wrapper">
			<ul class="tab">
				<li class="tab-item active">国际大牌<span>|</span></li>
				<li class="tab-item">国妆名牌<span>|</span></li>
				<li class="tab-item">清洁用品<span>|</span></li>
				<li class="tab-item">男士精品</li>
			</ul>
			<div class="products">
				<div class="main selected">
					<a href="#"><img src="images/guojidapai.jpg" alt="" /> </a>
				</div>
				<div class="main">
					<a href="#"><img src="images/guozhuangmingpin.jpg" alt="" /> </a>
				</div>
				<div class="main">
					<a href="#"><img src="images/qingjieyongpin.jpg" alt="" /> </a>
				</div>
				<div class="main">
					<a href="#"><img src="images/nanshijingpin.jpg" alt="" /> </a>
				</div>
			</div>
		</div>

	</body>

</html>