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


Posted in Javascript onDecember 22, 2020

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

Javascript 相关文章推荐
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
Javascript中replace()小结
Sep 30 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Vue监听页面刷新和关闭功能
Jun 20 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
Vue如何实现组件间通信
May 15 Vue.js
基于jQuery实现搜索关键字自动匹配功能
Mar 26 #Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 #Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 #Javascript
php利用curl获取远程图片实现方法
Oct 26 #Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 #Javascript
JavaScript中的数据类型转换方法小结
Oct 26 #Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 #Javascript
You might like
php扩展ZF――Validate扩展
2008/01/10 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php上传大文件设置方法
2016/04/14 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JS重要知识点小结
2011/11/06 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
Django框架安装方法图文详解
2019/11/04 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python软件都是免费的吗
2020/06/18 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
综合实践活动方案
2014/02/14 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
调任通知
2015/04/21 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书