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 相关文章推荐
Javascript Object.extend
May 18 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
js获取json元素数量的方法
Jan 27 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
深入理解js promise chain
May 05 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
基于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
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
Python求解平方根的方法
2015/03/11 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
三个儿子教学反思
2014/02/03 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
小学班主任事迹材料
2014/12/17 职场文书
环卫处个人工作总结
2015/03/04 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书