我们昨天说了关于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. 加快npm包安装的方法

    一直以来都感觉使用npm安装包的速度特别的慢,但是由于npm上面的包比较齐全,所以一直在忍受这种安装依赖包的折磨. 不过这种折磨,到今天为止应该是可以结束了,在知乎看到一个这样的说法: 用npmins ...

  2. C#基于SQLiteHelper类似SqlHelper类实现存取Sqlite数据库的方法

    本文实例讲述了C#基于SQLiteHelper类似SqlHelper类实现存取Sqlite数据库的方法.分享给大家供大家参考.具体如下: 这个类不是我实现的,英文原文地址为http://www.egg ...

  3. 选课 树形背包dp

    题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有个学分,每门课有一 ...

  4. IntelliJ IDEA 把Maven项目导出可执行jar包

    2017年04月05日 14:05:08 waterimelon 阅读数:1574 标签: intellij ideamaven 更多 个人分类: idea   第一步  第二步  第三步 

  5. adminlte+layui框架搭建2 - 动态菜单

    动态菜单 参考文章:https://cloud.tencent.com/developer/article/1342558 主要修改两个地方: 1.系统初始化加载一级菜单,在adminlte.js文件 ...

  6. 使用IDEA完成maven整合SSH框架时抛出Hibernate : Mapping (RESOURCE) not found

    切入主题,看看今天的错误是如何发生的: 首先这是我的项目路径,java 是 Sources Root , resources 是 Resources Root ,放了所需要的配置文件,其中 Hiber ...

  7. 精神AC合集 2018.4.3

    UESTC炸了,先把看似十分OK(只是过了样例)的代码贴上,修复好后再交上去 594 #include<iostream> #include<algorithm> #inclu ...

  8. HDU - 6186 前缀和位运算

    异或操作蒙蔽了我的双眼 以至于没有第一时间想到前缀和与后缀和 水题做的不够多 #include<bits/stdc++.h> #define rep(i,j,k) for(register ...

  9. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  10. git平台创建项目(码云)

    一.在码云创建项目 1.新建仓库 2,项目名称等 3.创建后的界面 4.克隆远程项目到本地(项目地址和用户名密码) git clone 仓库地址 注意,如果当前目录下出现git仓库同名目录时,会克隆失 ...