jQuery---tab切换

结构

<div class="container">
    <!--tab切换模块-->
    <div class="tab">
        <!--切换按钮-->
        <ul class="tab-control">
            <li class="active">疯狂抢购</li>
            <li>热卖推荐</li>
            <li>猜你喜欢</li>
            <li>新品上架</li>
            <li>整箱特卖</li>
        </ul>
        <!--切换项-->
        <div class="tab-content" id="tab_content">
            <div class="tab-content-item active">
                <img src="img/01.bmp"/>
            </div>
            <div class="tab-content-item">
                <img src="img/02.bmp"/>
            </div>
            <div class="tab-content-item">
                <img src="img/03.bmp"/>
            </div>
            <div class="tab-content-item">
                <img src="img/04.bmp"/>
            </div>
            <div class="tab-content-item">
                <img src="img/05.bmp"/>
            </div>

        </div>

    </div>
</div>

样式
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.container{
width:1120px;
margin:0 auto;
}
.tab{
width:1004px;
margin:0 auto;
border:1px solid #aaa;
}
.tab-control{
overflow:hidden;
}
.tab-control li{
width:200px;
float:left;
background-color:#ccc;
border-top:3px solid #aaa;
font:bold 22px/40px “宋体”;
text-align:center;
cursor:pointer;
color:#000;

}
.tab-control li.active{
border-top:3px solid red;
background-color:#fff;
color:red;

}

.tab-control li+li{
border-left:1px solid #aaa;
}
.tab-content{
width:1000px;
}
.tab-content .tab-content-item {
display:none;
}
.tab-content .tab-content-item.active {
display:block;
}
.tab-content .tab-content-item img{
width:100%;
}
脚本
$(’.tab-control li’).click(function(){
var index = $(this).index()
$(this).addClass(‘active’).siblings().removeClass(‘active’)
$(’.tab-content .tab-content-item’).addClass(‘active’).eq(index).siblings().removeClass(‘active’)
})