我们昨天说了关于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. JS 只创建一个元素

    //判断有没有这个元素<div id="div"> if(my$("div").firstElementChild){ console.log(&q ...

  2. redux超易学三篇之三（一个逻辑完整的react-redux)

    配合源代码学习吧~ : 我是源代码 这一分支讲的是 如何完整地(不包含优化,也没有好看的页面) 搭建一个 增删改查 的 react-redux 系统 不同于上一节的 react-redux,这里主要采 ...

  3. ansys 14.0

    张建伟等．2012.12 人民邮电 一天一本书,这种感觉 真是爽啊． 但我觉得什么也没学到． 话说回来,此authors 确实书写得比较一般,实例不如百度文档上的WORD实例,理论不如我看的那本CFD ...

  4. SQL异常捕获

    直接上代码: GO BEGIN TRY DECLARE @res INT SET @res=1/0 PRINT 'no error' END TRY BEGIN CATCH PRINT 'Error ...

  5. 转 .net数据类型

    .net 数据类型   short s=0; s = s + 1; 和short s=0; s += 1; 这两个表达式有什么区别,会报什么错误? 有区别吗??大家要想想呢还是要测试一下啊,我选择测试 ...

  6. 写给初学者的话---linux使用说明

    2018年noip上海赛区可以使用window操作系统的美梦终究还是破灭了!!!!上海大部分noip选手都陆陆续续开始改linux........好吧,那我们今天来看看linux操作系统中,noip选 ...

  7. RESTful 设计工具和Web框架

    搭建开发环境几乎都搭建失败,因为需要FQ Spring Boot 和 Spring MVC 单独 Jersey官网可以直接访问 https://jersey.java.net/documentatio ...

  8. switch case 注意事项+1 及 case合并综合练习例子

    case可以合并: 练习11:根据输入的星期,得到具体每天做的事情.星期一学习,星期二学习,星期三自习,星期四学习,星期五自习,星期六学习,星期日学习 class Switch02{ public s ...

  9. BFC --- Block Formatting Context --- 块级格式化上下文

    虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...

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

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