我们昨天说了关于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. Leetcode 25. Reverse Nodes in k-Group 以每组k个结点进行链表反转(链表)

    Leetcode 25. Reverse Nodes in k-Group 以每组k个结点进行链表反转(链表) 题目描述 已知一个链表,每次对k个节点进行反转,最后返回反转后的链表 测试样例 Inpu ...

  2. (C/C++) Link List - C++ 版本

    利用C++寫一個基本的 Link list 練習,功能包含 pint list.CreatList.Insert.Delete.Reverse.Search.Clear.GetLen. 先建立相關的C ...

  3. Ubuntu16.04更换下载源

    更新源的方法 进入/etc/apt/ cd /etc/apt 对 sources.list文件进行备份: sudo cp sources.list sources.list.bak 打开源列表文件 s ...

  4. Android 系统特有的类介绍及使用

    1.Content类 在应用程序中Context的具体实现子类就是:Activity,Service,Application.可以把它理解成存储东西的仓库. 常用的上下文一般是类名.class或类名. ...

  5. UVALive - 5963 ad-hoc

    注意到合法条件是对称的,那很有可能与2有关, 小于2表示没有这一页,大于2表示冲突了 我也不知道这样做对不对的(输入范围很迷),试一下就A了... #include<bits/stdc++.h& ...

  6. hive安装 jdbc链接hive

    1. 下载hive安装包 2. 进入 conf 中  :  cp hive-default.xml.template hive-site.xml,  vi hive-site.xml 1)首行添加: ...

  7. java多线程-Lock

    大纲: Lock接口 synchronized&Lock异同 一.Lock public interface Lock { void lock(); void lockInterruptibl ...

  8. @font-face引用指定字体库（一）

    创建 文件夹 font 存放指定字体库 在css文件中使用字体库: html, body{ font-family: "Microsoft YaHei",Arial,Helveti ...

  9. Ace向你推荐一些实用的干货库~开发安卓的好帮手

    1 毁灭地球的军火库arsenal- 你想要的枪这里都有卖 哈哈哈哈 , http://android-arsenal.com/ 2 黑科技---在线反编译----嘿嘿嘿  在线反编译 方便简单 客官 ...

  10. javascript遍历表

    定义表结构 1. 通过id遍历 <html> <body> <table id="tb" border="1"> <t ...