我们昨天说了关于Angular的选项卡,那今天就说一下Swiper的选项卡吧!

今天的选项卡是Zepto结合Swiper的选项卡,咱么明天再说纯纯的Swiper的吧!

既然是关于Zepto和Swiper的选项卡,那就说明了!要有关于Swiper和Zepto的插件,

分别是这两个:

zepto.min.js

swiper.min.js

还有swiper.min.css

就是这三个,

分别针对于布局,事件,和滑动效果哦!   好!话不多说,翠花,上代码:

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">
　　　　　　　　//此乃移动端的标签

         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

         <title>选项卡哦!</title>

         <link rel="stylesheet" href="js/swiper/swiper.min.css" />

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

                 font-family: "微软雅黑";

             }

             .wrap {

                 margin: 0 auto;

             }

             .tabs {

                 height: 32px;

                 background: #5AA9F3;

                 width: 100%;

                 padding-top: 8px;

                 text-align: center

             }

             .tabs .part {

                 display: block;

                 float: left;

                 width: 33%;

                 color: #fff;

                 text-align: center;

                 height: 20px;

             }

             .tabs .part:first-child {

                 border-right: 1px solid #ADDAFD;

             }

             /*这些是等待被操作的样式哦!*/

             .tabs a {

                 width: 70px;

                 display: block;

                 color: #fff;

                 text-align: center;

                 margin: 0 auto;

                 font-size: 16px;

                 text-decoration: none;

                 padding-bottom: 2px;

             }

             .tabs span.active a {

                 color: #fff;

                 border-bottom: 2px solid #fff;

             }

             .swiper-container {

                 width: 100%;

                 border-top: 0;

                 margin-top: 10px!important

             }

             .swiper-slide {

                 width: 100%;

                 background: none;

                 color: #373737;

             }

             p {

                 text-align: center;

             }

         </style>

     </head>

     <body class="bgc_gray">

         <div class="pg-main">

             <div id="wrapper">

                 <div class="wrap">

                     <div class="tabs">
　　　　　　　　　　　　　　　　//三个选项

                         <span class="part active">

                             <a href="#" hidefocus="true" >全免费</a>

                         </span>

                         <span class="part" style="border-right: 1px solid #ADDAFD">

                             <a href="#" hidefocus="true">优惠券</a>

                         </span>

                         <span class="part">

                             <a href="#" hidefocus="true">个人免费</a>

                         </span>

                     </div>

                     <div class="swiper-container">

                         <div class="swiper-wrapper">

                             <div class="swiper-slide swiper-slide-visible swiper-slide-active">

                                 <!--滑动区-->

                                 <div class="content-slide">

                                     <p>这位朋友</p>

                                     <p>请在此稍作停留</p>

                                     <p>你今天身上有卦 别怕</p>

                                     <p>给我看看你的手</p>

                                     <p>胡说八道</p>

                                     <p>葫芦里卖的什么药</p>

                                     <p>不过是江湖圈套 可笑</p>

                                     <p>让警察把你赶跑</p>

                                 </div>

                             </div>

                             <div class="swiper-slide">

                                 <div class="content-slide">

                                     <p>恕我直言</p>

                                     <p>你夜晚无法安眠</p>

                                     <p>你遇到一个梦魇</p>

                                     <p>每天 什么藏在你床边</p>

                                     <p>话音刚落</p>

                                     <p>我已被冷汗浸透</p>

                                     <p>他说的一点不错 拜托</p>

                                     <p>请你一定救救我</p>

                                 </div>

                             </div>

                             <div class="swiper-slide">

                                 <div class="content-slide">

                                     <p>我銕口直断 为你消灾解难</p>

                                     <p>阴阳自在我心间 与天地周旋</p>

                                     <p>一生神机妙算 只有自己看不穿</p>

                                     <p>你荣华富贵在我 我生死有命在天</p>

                                 </div>

                             </div>

                         </div>

                     </div>

                 </div>

             </div>

         </div>

         <script type="text/javascript" src="js/zepto.min.js"></script>

         <script type="text/javascript" src="js/swiper/idangerous.swiper.min.js"></script>

         <script type="text/javascript">

             $(function() {

 　　　　　　　　　　//获取 Swiper轮播图

                 var tabsSwiper;

                 tabsSwiper = new Swiper('.swiper-container', {

                     speed: 500,

                     onSlideChangeStart: function() {
　　　　　　　　　　　　　　　　//zepto操作DOM节点 删除类名

                         $(".tabs .active").removeClass('active');

                         $(".tabs span").eq(tabsSwiper.activeIndex).addClass('active');

                     }

                 });
　　　　　　　　　　　　　　　　//删除或添加类名

                 $(".tabs span").on('touchstart mousedown', function(e) {
　　　　　　　　　　　　　　　　//阻止默认事件

                     e.preventDefault()

                     $(".tabs .active").removeClass('active');

                     $(this).addClass('active');

                     tabsSwiper.swipeTo($(this).index());

                 });
　　　　　　　　　　　　/给上面的三个选项添加点事件!

                 $(".tabs span").click(function(e) {
　　　　　　　　　　　　　　　　//阻止默认事件

                     e.preventDefault();

                 });

             }); //end

         </script>

     </body>

 </html>

就是这么简单,你学会了吗?

Zepto结合Swiper的选项卡的更多相关文章

  1. 关于swiper的tab(选项卡)中设置了autoHeight没有效果解决

    autoHeight属性使用看官网的示例:https://www.swiper.com.cn/api/parameters/294.html swiper的选项卡结构查看:https://www.sw ...

  2. IOS-Hybrid（混合开发）

    http://www.cnblogs.com/oc-bowen/p/5423902.html 1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等 ...

  3. 移动开发--Hybrid和Native混合开发-->HybridApp 、NativeApp、WebApp

    1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等).金融(各手机行业.P2P借贷等).医疗(智慧医疗).交通(滴滴.Uber等).教育(慕课网 ...

  4. M端总结

    最近在项目开发过程中涉及到了移动端,现在对此进行总结. 在此次M端的开发过程中,遇到了许多问题,在此进行一次总结,希望大家在以后的开发过程中能尽量规避类似的问题,提高开发效率和代码质量.一.布局1.移 ...

  5. 横向浅谈移动技术------（ 原生，混合，web --- 谁能问鼎移动开发的明天）

    目前移动互联网基本采用了NativeApp.WebApp.HybridApp三种开发模式,很难说这三种模式那种更优越,目前的情况可以说是三分天下吧,不同的开发者可以根据自己的实际情况选择不同的开发模式 ...

  6. 移动端JS事件、移动端框架

    一.移动端的操作方式和PC端是不同的,移动端主要是用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1.手指放到屏幕上时触发   touchstart 2.手指放在屏幕上滑动式 ...

  7. 框架： require.js

    require.js http://www.bootcdn.cn/require.js/ HTML: <div class="container" data-page=&qu ...

  8. h5博彩webapp项目实例|h5棋牌游戏|h5博彩app案例

    html5实现的博彩webapp.h5棋牌app实例,运用h5+css3+zepto+jQ+swiper+layer等技术进行布控开发,750px最大宽度适配手机端设备,采用flex+rem布局样式. ...

  9. KJ面试

    1.css input checkbox和radio样式美化 <span class="pay_list_c1 on"> <input type="ra ...

随机推荐

  1. iOS苹果和微信中音频和视频实现自动播放的方法

    通过下面的方式可以解决,在iPhone手机微信中正常自动播放. 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,猜测微信接口做了处理~ <audio prel ...

  2. 4.jQuery和DOM 对象之间的相互转换

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. netstat查看tcp连接的状态

    netstat -n | awk '/^tcp/ {++state[$NF]} END {for(key in state) print key,"\t",state[key]}'

  4. Android 日历视图(Calendarview)

    1.介绍 2.常用属性 3.xml文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...

  5. C++_标准模板库STL概念介绍1-建立感性认知

    标准模板库的英文缩写是STL,即Standard Template Library. STL里面有什么呢? 它提供了一组表示容器.迭代器.函数对象和算法的模板. 容器是一个与数组类似的单元,可以存储若 ...

  6. 毕业设计 python opencv实现车牌识别 码云地址

    码云地址:https://gitee.com/yinghualuowu/Python_VLPR 删除了冗余代码,可以更加便于运行.其实是为了那些进不去github准备的~

  7. Python入门(1)

    1.编程语言 机器语言:直接用计算机能听懂的二进制指令去编写程序,需要了解硬件的细节 汇编语言:用英文标签取代二进制指令去编写程序,同样需要了解硬件的细节 高级语言:直接用人类能理解的表达方式去编写程 ...

  8. 使用Redis 配置替换fastjson 反序列化报错 com.alibaba.fastjson.JSONException: autoType is not support

    新建的GenericFastJson2JsonRedisSerializer里面添加白名 添加: static {        ParserConfig.getGlobalInstance().ad ...

  9. Docker原理（开发技术分享转发）

    Docker原理Docker是啥Docker是一个程序运行.测试.交付的开放平台,Docker被设计为能够使你快速地交付应用.在Docker中,你可以将你的程序分为不同的 基础部分,对于每一个基础部分 ...

  10. Java中forEach, 用来遍历数组

    这里的for是Java中forEach, 用来遍历数组的.for(int i : d) 就是遍历int型数组d的 每一次访问数组d的时候读取的数据放入int型的i中.和for(int i=0;i< ...