jquery實現橫向tab,滑動tab時內容左右滑動
阿新 • • 發佈:2018-12-11
最近寫一個電商的網站,要相容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) })
。。
樣式沒調得多好看,只是把大體的效果實現了,細的樣式再調整就可以