我們使用行動端時可以透過觸控螢幕手勢左右滑動來切換TAB欄目，如網易新聞等APP欄位切換。我們說的TAB一般由導航條和TAB對應的內容組成，切換導航條上的標籤同時標籤對應的內容也會跟著切換。本文將結合實例為大家介紹一個行動端TAB觸控螢幕切換效果。
我們準備一個TAB導航#pagenavi，裡麵包含TAB導航要切換的四個導航按鈕，然後是切換的主體內容#slider，這裡應該放置四個li與導航按鈕對應，內容自訂。
<div class="box-163css"> <ul id="pagenavi" class="page"> <li><a href="#">CSS3</a></li> <li><a href="#">JAVASCRIPT</a></li> <li><a href="#">PHP</a></li> <li><a href="#">HTML5</a></li> </ul> <div id="slider" class="swipe"> <ul class="box01_list"> <li class="li_list"> ... </li> ...<!--总共4个li--> </ul> </div> </div>
當然，我們還要為HTML加上css樣式，這塊依照自己的習慣愛好進行設定。
由於是行動端應用，我們載入zepto.js，zepto就是體積小的jquery。然後需要載入觸控螢幕滑動插件touchslider.js。
<script type="text/javascript" src="js/zepto_min.js"></script> <script type="text/javascript" src="js/touchslider.js"></script>
接下來我們就直接呼叫TouchSlider，透過設定綁定tab，滑動方向、速度、時間等資訊實作內容切換，請看詳細程式碼：
<script type="text/javascript">
var page='pagenavi';
var mslide='slider';
var mtitle='emtitle';
arrdiv = 'arrdiv';
var as=document.getElementById(page).getElementsByTagName('a');
var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){
var as=document.getElementById(this.page).getElementsByTagName('a');
as[this.p].className='';
as[index].className='active';
this.p=index;
var txt=as[index].innerText;
$("#"+this.page).parent().find('.emtitle').text(txt);
var txturl=as[index].getAttribute('href');
var turl=txturl.split('#');
$("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);
}});
tt.page = page;
tt.p = 0;
for(var i=0;i<as.length;i++){
(function(){
var j=i;
as[j].tt = tt;
as[j].onclick=function(){
this.tt.slide(j);
return false;
}
})();
}
</script>以上就是關於行動裝置TAB觸控螢幕切換效果的關鍵程式碼分享給大家，希望大家喜歡。
