成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

我們使用移動端時可以通過觸屏手勢左右滑動來切換TAB欄目，如網(wǎng)易新聞等APP欄目切換。我們說的TAB一般由導航條和TAB對應(yīng)的內(nèi)容組成，切換導航條上的標簽同時標簽對應(yīng)的內(nèi)容也會跟著切換。本文將結(jié)合實例給大家介紹一個移動端TAB觸屏切換效果。

我們準備一個TAB導航#pagenavi，里面包含TAB導航要切換的四個導航按鈕，然后是切換的主體內(nèi)容#slider，這里應(yīng)該放置四個li與導航按鈕對應(yīng)，內(nèi)容自定義。

<div class="box-163css"> 
 <ul id="pagenavi" class="page"> 
  <li><a >CSS3</a></li> 
   <li><a >JAVASCRIPT</a></li> 
  <li><a >PHP</a></li> 
  <li><a >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樣式，這塊根據(jù)自己的習慣愛好進行設(shè)置。

由于是移動端應(yīng)用，我們加載zepto.js，zepto就是體積小的jquery。然后需要加載觸屏滑動插件touchslider.js。

<script type="text/javascript" src="http://www.gimoo.net/t/1904/js/zepto_min.js"></script> 
<script type="text/javascript" src="http://www.gimoo.net/t/1904/js/touchslider.js"></script>

接下來我們就直接調(diào)用TouchSlider，通過設(shè)置綁定tab，滑動方向、速度、時間等信息實現(xiàn)內(nèi)容切換，請看詳細代碼：

<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>

以上就是關(guān)于移動端TAB觸屏切換效果的關(guān)鍵代碼分享給大家，希望大家喜歡。