![这里写图片描述](https://img-blog.csdn.net/20170510103041430?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbTBfMzgwNzM4Mjk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
<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="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
js代码
$(function () {
$(".tab>li").mouseover(function () {
$(this).addClass("active").siblings("li").removeClass("active");
var index=$(this).index();
$(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
});
});