jQuery图片tab栏切换

Posted 2020-10-19 Carina

 1 <script>
 2  $(function(){
 3    $(‘.tab li‘).mouseenter(function(){
 4         var $this=$(this);
 5         var index=$this.index();
 6         $this.addClass(‘active‘).siblings().removeClass(‘active‘);
 7         $(‘.products  div‘).eq(index).addClass(‘selected‘).siblings().removeClass(‘selected‘);
 8    })
 9  })
10 </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;
        }