移動端選項卡切換帶每一步的解析
阿新 • • 發佈：2018-12-03
**直接複製執行前提你的引進需要的東西
**
請使用Swiper3.x
**效果圖如下**  <!DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" /> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/swiper.min.css" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <title>Swiper選項卡</title> <style type="text/css"> * { margin: 0; padding: 0; border: 0; font-family: "微軟雅黑"; } h1{ font-family: "led"; color: green; } .list { width: 100%; height: 40px; background: #f8f8f8; } .list ul li { width: 25%; height: 100%; float: left; list-style: none; } .list ul li p { width: 100%; height: 40px; text-align: center; line-height: 40px; } .list ul li .active { border-bottom: 1px solid red; color: red; font-weight: bold; } .swiper-container { width: 100%; margin: 5px auto; } .swiper-container .swiper-slide { width: 100%; height: 500px; overflow: hidden; } .swiper-container .swiper-slide p{ font-size: 22px; line-height: 41px; padding: 5px 19px; } </style> </head> <body> <h1>下面使用的都是Swiper3.x方法及其函式請下載對應的版本</h1> <div class="list"> <ul class="tabs"> <li> <p class="active">線上演示</p> </li> <li> <p>中文教程</p> </li> <li> <p>獲取Swiper</p> </li> <li> <p>API 文件</p> </li> </ul> </div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <p> Swiper3.x基礎測試包Swiper基本實現，僅供參考 swiper-3.4.2完整壓縮包包含Swiper3的基礎演示和js、css檔案，Swiper3的最後一個版本 swiper-3.4.2.min.js單個的Swiper的js檔案 swiper-3.4.2.jquery.min.js如果你的頁面載入了jQuery.js或者zepto.js，可以使用這個版本的Swiper，更輕量 swiper-3.4.2.min.css單個的Swiper的css檔案 swiper.animate1.0.2.min.jsSwiper動畫js animate.min.cssSwiper動畫CSS animate.cssanimate.css的無壓縮檔案 jquery-1.10.1.min.js zepto.min.js </p> </div> <div class="swiper-slide"> <p> 1.首先載入外掛，需要用到的檔案有swiper.min.js和swiper.min.css檔案。 導航等元件可以放在container之外 3.你可能想要給Swiper定義一個大小，當然不要也行。 .swiper-container { width: 600px; height: 300px; } 4.初始化Swiper：最好是挨著標籤 5.完成。恭喜你，現在你的Swiper應該已經能正常切換了。現在開始新增各種選項和引數豐富你的Swiper，開啟華麗移動前端創作之旅 </p> </div> <div class="swiper-slide"> <p> https://3.swiper.com.cn/download/index.html 點選下載相應的文件 Swiper3.x基礎測試包Swiper基本實現，僅供參考 swiper-3.4.2完整壓縮包包含Swiper3的基礎演示和js、css檔案，Swiper3的最後一個版本 swiper-3.4.2.min.js單個的Swiper的js檔案 swiper-3.4.2.jquery.min.js如果你的頁面載入了jQuery.js或者zepto.js，可以使用這個版本的Swiper，更輕量 swiper-3.4.2.min.css單個的Swiper的css檔案 swiper.animate1.0.2.min.jsSwiper動畫js animate.min.cssSwiper動畫CSS animate.cssanimate.css的無壓縮檔案 jquery-1.10.1.min.js zepto.min.js </p> </div> <div class="swiper-slide"> <p> Swiper3.x的全部配置選項、方法、函式 Swiper初始化 Basic（Swiper一般選項） Progress（進度） Free Mode （free模式/抵抗反彈） Slides grid (網格分佈) Effects (切換效果) Clicks (點選) Touches(觸發條件) Swiping / No swiping(禁止切換) Pagination（分頁器） Navigation Buttons（前進後退按鈕） Scollbar（滾動條） Keyboard / Mousewheel (滑鼠、鍵盤控制選項) Images (圖片選項) Loop (環路) Zoom (調焦) Controller (雙向控制) Observer （監視器） Callbacks （回撥函式） Namespace （名稱空間） Properties （Swiper屬性） Methods （Swiper方法） </p> </div> </div> </div> </body> </html> <script type="text/javascript"> var mySwiper = new Swiper('.swiper-container', { //回撥函式，swiper從當前slide開始過渡到另一個slide時執行 onSlideChangeStart: function() { //載入的時候第一個li的p標籤上加了active，所以當我們觸發這個函式的時候就需要移除下面的active樣式 $('.list .active').removeClass('active'); //swiper滑動時下標對應li的下標 $(".tabs li p").eq(mySwiper.activeIndex).addClass('active'); //列印下標 console.log(mySwiper.activeIndex) } }) $('.tabs li').on('click', function(e) { //獲取點選的下標 var index = $(this).index(); //阻止元素髮生預設的行為 e.preventDefault(); //移除第一個預設樣式 $(".tabs .active").removeClass('active'); //Swiper切換到指定slide。 mySwiper.slideTo(index, 1000, false); //點選誰給誰新增樣式 $(this).find('p').addClass('active'); }) </script>