jQuery图片tab栏切换

<script>
 $(function(){
   $('.tab li').mouseenter(function(){
        var $this=$(this);
        var index=$this.index();
        $this.addClass('active').siblings().removeClass('active');
        $('.products  div').eq(index).addClass('selected').siblings().removeClass('selected');
   })
 })
</script>

html代码：

 <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>

 

css代码：

   *{
            margin: 0;
            padding: 0;}
        .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{
            list-style: none;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor:pointer;
            border-top: 4px solid #fff;
            position: relative;
        }
        .tab span{
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }
        .products{
            width: 1002px;
            border:1px solid #ddd;
            height: 476px;
        }
        .products  .main{
            float: left;
            display: none;
        }
        .products  .main.selected{
            display: block;
        }
        .tab li.active{
            border-color:red;
            border-bottom: 0;
        }