我們使用移動端時可以通過觸屏手勢左右滑動來切換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觸屏切換效果的關鍵代碼分享給大家，希望大家喜歡。
新聞熱點
疑難解答
