最近寫一個電商的網站，要相容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)
  })
 

。。

樣式沒調得多好看，只是把大體的效果實現了，細的樣式再調整就可以