We talked about Angular’s tabs yesterday, so let’s talk about Swiper’s tabs today!

Today’s tabs are Zepto combined with Swiper’s tabs. Let’s talk about pure Swiper tomorrow. Right!

Since it’s a tab about Zepto and Swiper, that’s it! There must be plug-ins for Swiper and Zepto,

are these two:

zepto.min.js

swiper.min.js

And swiper.min.css

These are the three,

are respectively for layout, events, and sliding effects! Okay! Without further ado, Cuihua, here’s the code:

 <!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?1.1.11" />          <style type="text/css">             *                 margin: 0                 padding: 0                 font-family: "微软雅黑"                                margin: 0                                  width: 100%                 padding-                 text-                                                  width: 33%                  text-                            .tabs .part:first-                 border-              /*这些是等待被操作的样式哦!*/                     text-                 margin: 0                 font-                 text-                 padding-                                 border-                           .swiper-                 width: 100%                 border-top: 0                 margin-top: 10px!                           .swiper-                 width: 100%                  color: #373737                                text-          </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?1.1.11"></script>         <script type="text/javascript" src="js/swiper/idangerous.swiper.min.js?1.1.11"></script>         <script type="text/javascript">             $( 　　　　　　　　　　//获取 Swiper轮播图                                  tabsSwiper =  Swiper('.swiper-container'                     speed: 500                     onSlideChangeStart:                          $(".tabs .active").removeClass('active'                         $(".tabs span").eq(tabsSwiper.activeIndex).addClass('active'                   $(".tabs span").on('touchstart mousedown',                       $(".tabs .active").removeClass('active'                     $().addClass('active'                     tabsSwiper.swipeTo($(                   $(".tabs span").click(                });          </script>     </body>  </html>

Copy after login

It’s that simple, have you learned it?

The above is the detailed content of Introduction to Swiper's tabs. For more information, please follow other related articles on the PHP Chinese website!