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实现按回车键切换焦点
Feb 09 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
Django rest framework实现分页的示例
2018/05/24 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
Python创建自己的加密货币的示例
2021/03/01 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
开业主持词
2014/03/21 职场文书
创先争优承诺书范文
2014/03/31 职场文书
消防验收申请报告
2015/05/15 职场文书
给校长的建议书范文
2015/09/14 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript