摘要:根據哈希值中設置的數字顯示對應的選項卡內容例如對應顯示第索引值為的選項卡內容即第二個選項卡字符串轉換為數字完整案例延伸閱讀我的另一篇用本地存儲方式從一個頁面跳轉到用寫的全屏滾動頁面的指定位置
選項卡五花八門,今天又要用到選項卡,首選swiper!
一、HTML布局根據swiper官網的要求來class命名滑塊。
二、CSS樣式
- Div+CSS
- JavaScript+JQuery
- AngularJS+Vue+NodeJs
隨便寫寫,根據使用場景調整。(PS:推薦一個在線美化工具)
*{margin:0;padding:0} li{list-style:none} .box{margin:50px auto;width:800px} .swiperTab{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center} .swiperTab li{display:flex;height:48px;border-left:1px solid #dfdfdf;background-color:#ddf8ff;cursor:pointer;flex:1;flex-direction:row;justify-content:center;align-items:center} .swiperTab li:first-child{border-left:1px solid transparent} .swiperTab li.active{background-color:#f60;color:#fff} .swiperTab li:nth-child(1).active{background-color:#9acd32} .swiperTab li:nth-child(2).active{background-color:green} .swiperTab li:nth-child(3).active{background-color:pink} .swiper-slide{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px} .swiper-slide:nth-child(1){height:200px;background-color:#9acd32} .swiper-slide:nth-child(2){height:300px;background-color:green} .swiper-slide:nth-child(3){height:100px;background-color:pink}三、Js封裝
自己封裝的選項卡函數swiperTab.js
/* swiper 選項卡函數 參數說明 * obj 必選,導航列表 * swiperObj: 必選,HTML元素或者string類型,Swiper容器的css選擇器 * className: 必選,當前樣式的類名 * effect:可選,切換效果,默認為"slide",可設置為"fade,cube,coverflow,flip"。 * 其他參數參閱官網 http://www.swiper.com.cn * */ function tabs(obj,swiperObj,className) { var tabSwiper = new Swiper(swiperObj, { effect : "flip",//切換效果 speed : 500, //滑動速度,單位ms autoHeight: true, // 高度隨內容變化 onSlideChangeStart : function() { $(obj+"."+className).removeClass(className); /*有當前類名的刪除類名,給下一個添加當前類名*/ $(obj).eq(tabSwiper.activeIndex).addClass(className);/*activeIndex是過渡后的slide索引*/ } }); // 模擬點擊事件,如果是移入事件,將mousedown 改為 mouseenter $(obj).on("touchstart mousedown", function(e) { e.preventDefault();/*清除默認事件*/ $(obj+"."+className).removeClass(className); $(this).addClass(className); /*點擊當前導航 改變當前樣式*/ tabSwiper.slideTo($(this).index());/*滑動到對應的滑塊*/ }); $(obj).click(function(e) { e.preventDefault();/*清除默認點擊事件*/ }); }四、Js調用
首先引入相關js
前端小白剛學JS。不足之處,不吝言賜教。謝謝!
五、拓展 經常遇到從另一個頁面直接跳轉到選項卡對應的內容例如:page.html 中點擊a標簽直接跳轉到對應展示頁面。
我們在href中直接添加錨點,錨點中包含一個數字即對應選項卡的索引值0、1、2
展示 Div+CSS 展示 JavaScript+JQuery 展示 ngularJS+Vue+NodeJs
對上面的案例稍作修改:
在swiperTab.js中添加設定初始化時slide的索引 initialSlide: index
傳入參數 index
在回調函數中 判斷tabSwiper是否存在,否則當哈希值不為0的時候會報錯 。
function tabs(obj,swiperObj,className,index) { var tabSwiper = new Swiper(swiperObj, { initialSlide: index, // 設定初始化時slide的索引 effect : "flip", speed : 500, autoHeight: true, onSlideChangeStart : function() { if(tabSwiper){ /*判斷tabSwiper是否存在,否則當哈希值不為0的時候會報錯 */ $(obj+"."+className).removeClass(className); $(obj).eq(tabSwiper.activeIndex).addClass(className); } } }); $(obj).on("touchstart mousedown", function(e) { e.preventDefault(); $(obj+"."+className).removeClass(className); $(this).addClass(className); tabSwiper.slideTo($(this).index()); }); $(obj).click(function(e) { e.preventDefault(); }); }
在調用的時候 根據哈希值(因為我們在a標簽的href中添加了錨點)來改變索引值index從而達到改變 swiper初始化時slide的索引的目的
```
完整案例
延伸閱讀我的另一篇用本地存儲 方式 從一個頁面跳轉到用swiper寫的全屏滾動頁面的指定位置
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112424.html
摘要:根據哈希值中設置的數字顯示對應的選項卡內容例如對應顯示第索引值為的選項卡內容即第二個選項卡字符串轉換為數字完整案例延伸閱讀我的另一篇用本地存儲方式從一個頁面跳轉到用寫的全屏滾動頁面的指定位置 選項卡五花八門,今天又要用到選項卡,首選swiper! 一、HTML布局 根據swiper官網的要求來class命名滑塊。 Div+CSS Jav...
摘要:根據哈希值中設置的數字顯示對應的選項卡內容例如對應顯示第索引值為的選項卡內容即第二個選項卡字符串轉換為數字完整案例延伸閱讀我的另一篇用本地存儲方式從一個頁面跳轉到用寫的全屏滾動頁面的指定位置 選項卡五花八門,今天又要用到選項卡,首選swiper! 一、HTML布局 根據swiper官網的要求來class命名滑塊。 Div+CSS Jav...
摘要:利用這篇教程存儲一些常用的微信小程序開發技巧,方便查找。但是第一,微信小程序是國內的,有中文文檔,雖然它的文檔說明有點坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯,記得給個...
摘要:利用這篇教程存儲一些常用的微信小程序開發技巧,方便查找。但是第一,微信小程序是國內的,有中文文檔,雖然它的文檔說明有點坑,但好歹有文檔,閱讀理解對小伙伴們來說不是問題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們,如果覺得本文還不錯,記得給個...
閱讀 1686·2021-09-22 10:02
閱讀 1930·2021-09-02 15:40
閱讀 2835·2019-08-30 15:55
閱讀 2242·2019-08-30 15:44
閱讀 3593·2019-08-30 13:18
閱讀 3224·2019-08-30 11:00
閱讀 1945·2019-08-29 16:57
閱讀 564·2019-08-29 16:41