最近写一个电商的网站,要兼容ie8。所以用的jquery,很久没用jquery了,写一个效果都很伤脑。
横向tab,滑动tab时内容左右滑动出现
首先是html代码
<div class="container">
<div class="tabs-box">
<a class="active" href="#">一</a>
<a href="#">二</a>
<a href="#">三</a>
</div>
<div class="content-box">
<div class="Jtab_item clearfix">
<div style="background:pink" class="content-item">内容一</div>
<div style="background:red" class="content-item">内容二</div>
<div style="background:yellow" class="content-item">内容三</div>
</div>
</div>
</div>
样式布局
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
.clearfix:before,
.clearfix:after{
display:table;
content:'';
clear:both;
}
.container{
position:relative;
margin:200px 0 0 300px;
width:300px;
height:440px;
overflow:hidden;
border:1px solid #ccc;
}
.tabs-box{
width:300px;
height:40px;
font-size:0;
}
.tabs-box a{
display:inline-block;
width:100px;
height:40px;
text-align:center;
line-height:40px;
font-size:12px;
}
.tabs-box a.active{
background:#f50030;
color:#fff;
}
.content-box{
position:relative;
width:300px;
height:400px;
overflow:hidden;
}
.Jtab_item{
position:absolute;
width:900px;
height:400px;
}
.Jtab_item .content-item{
width:300px;
height:400px;
float:left;
}
.Jtab_item的定位是重点,所以一定要弄明白为什么:position:absolute
布局定位都写好了,写js就很简单啦,只需要移动Jtab_item层
js代码
$('.tabs-box a').mouseover(function(){
var _index=$(this).index();
$('.tabs-box a').eq(_index).addClass('active').siblings().removeClass('active');
$('.Jtab_item').animate({
left:-_index *300
},300)
})
。。
样式没调得多好看,只是把大体的效果实现了,细的样式再调整就可以