jquery移动端TAB触屏切换实现效果

 更新时间:2020年12月22日 10:13:12   投稿:lijiao  
这篇文章主要介绍了jquery移动端TAB触屏切换实现效果案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

我们使用移动端时可以通过触屏手势左右滑动来切换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触屏切换效果的关键代码分享给大家,希望大家喜欢。

相关文章

  • jQuery的学习步骤

    jQuery的学习步骤

    首先我建议大家去看看<JQUERY实战>这本书,稍后我会提供本书的jquery实战PDF版本。能省点银子最好啊。
    2011-02-02
  • instanceof和typeof运算符的区别详解

    instanceof和typeof运算符的区别详解

    两个运算符虽然比较相似,其实区别还是非常大的,虽然不难区别,但是对于初学者可能稍有困扰,下面就简单介绍一下它们两者的区别,希望对需要的朋友有所帮助
    2014-01-01
  • jQuery判断邮箱格式对错实例代码讲解

    jQuery判断邮箱格式对错实例代码讲解

    本文通过实例代码给大家讲解了基于jquery判断邮箱格式对错,非常实用,具有参考借鉴价值,需要的的朋友参考下吧
    2017-04-04
  • jQuery数据类型小结(14个)

    jQuery数据类型小结(14个)

    jQuery除了包含原生JS中的内置数据类型(built-in datatype),还包括一些扩展的数据类型(virtual types),如Selectors、Events等,通过本文给大家分享14个jquery数据类型,感兴趣的朋友一起学习吧
    2016-01-01
  • JQuery模拟实现网页中自定义鼠标右键菜单功能

    JQuery模拟实现网页中自定义鼠标右键菜单功能

    这篇文章主要给大家介绍了关于利用JQuery模拟实现网页中自定义鼠标右键菜单功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • jQuery调取jSon数据并展示的方法

    jQuery调取jSon数据并展示的方法

    这篇文章主要介绍了jQuery调取jSon数据并展示的方法,实例分析了jQuery调用json数据及展示的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • Jquery为a标签的href赋值实现代码

    Jquery为a标签的href赋值实现代码

    Jquery为a标签的href赋值实现思路如下:先获取选中项的值在使用attr属性为href赋值,有类似需求的朋友可以参考下哈,希望可以帮助到你
    2013-05-05
  • 用jQuery模拟页面加载进度条的实现代码

    用jQuery模拟页面加载进度条的实现代码

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢
    2011-12-12
  • jQuery动态增减行的实例代码解析(推荐)

    jQuery动态增减行的实例代码解析(推荐)

    这篇文章主要介绍了jQuery动态增减行的实例代码解析,本文图文并茂给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • jQuery-Citys省市区三级菜单联动插件使用详解

    jQuery-Citys省市区三级菜单联动插件使用详解

    这篇文章主要为大家详细介绍了jQuery-Citys省市区三级菜单联动插件使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07

最新评论