基于JavaScript實現(xiàn)移動端TAB觸屏切換效果

更新時間：2015年10月20日 14:48:24 投稿：mrr

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

展示效果圖如下所示：

效果演示源碼下載

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

HTML

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

<div class="box-163css"> 
  <ul id="pagenavi" class="page"> 
    <li><a href="#http://chabaoo.cn/css.html" class="active">CSS3</a></li> 
     <li><a href="#http://chabaoo.cn/jquery.html">JAVASCRIPT</a></li> 
    <li><a href="#http://chabaoo.cn/php.html">PHP</a></li> 
    <li><a href="#http://chabaoo.cn/web.html">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樣式，本例已打包好css文件供大家下載。

JAVASCRIPT

由于是移動端應用，我們加載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，滑動方向、速度、時間等信息實現(xiàn)內容切換，請看詳細代碼：

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

以上內容是本文的全部敘述，希望對大家學習有所幫助。

您可能感興趣的文章: