我们昨天说了关于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. SDUT OJ 数据结构实验之串三：KMP应用

    数据结构实验之串三:KMP应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...

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

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

  3. jenkins官方文档（中文版）

    https://www.w3cschool.cn/jenkins/

  4. Jmeter拓展插件可查看和lr一样的图形结果

    利用插件可通过图形直观查看CPU.Memory等的运行情况 1. JmeterPlugins.jar插件下载地址:http://jmeter-plugins.org/downloads/all 下载并 ...

  5. payload指安全测试数据

    payload,翻译过来是有效载荷 通常在传输数据时,为了使数据传输更可靠,要把原始数据分批传输,并且在每一批数据的头和尾都加上一定的辅助信息,比如数据量的大小.校验位等,这样就相当于给已经分批的原始 ...

  6. CF E2 - Array and Segments (Hard version) （线段树）

    题意给定一个长度为n的序列,和m个区间.对一个区间的操作是:对整个区间的数-1可以选择任意个区间(可以为0个.每个区间最多被选择一次)进行操作后,要求最大化的序列极差(极差即最大值 - 最小值).ea ...

  7. C#串口编程 操作硬件

    -------通过USB将硬件连接PC, 更新USB驱动,使用下面方法可控制相关设备. //1声明一个串口对象 public static SerialPort MainModule_Port_ = ...

  8. PIE SDK矢量唯一值渲染

    1. 功能简介 图层的唯一值渲染即是根据矢量图层的某一个数值字段的属性值,按照值的不同大小设置不同的显示符号.属性数值相等的所有要素归为同一种类,即同一符号. 2. 功能实现说明 2.1. 实现思路及 ...

  9. drupal 7 安装失败后的补救办法

    在安装 drupal 7 时安装,导入数据库已经成功,但是在安装语言包的时候卡住了,没有进行最后三步,管理员帐号没能启用.此时我退出安装,访问网站,没有问题.但是管理员admin的密码没有设置,以至于 ...

  10. Unable to connect to data source (DSN: shangjihuiclient; Network Address: ; Port Number: 53397). Cannot connect to TimesTen Server. Verify that the TimesTen Server is running or verify that your TCP PORT is set correctly.

    安装完毕TimesTen后,在客户端连接时一直报错. 解决办法是:重启服务器,在连接没在报这个错误.