簡單的選項卡切換效果

xiaoqibTn 發布于2019-08-29 17:24 / 2642人閱讀

摘要：利用錨點的思想可以實現一個簡單的選項卡切換效果。其原理就是在每個列表里塞入一個肉眼看不見的輸入框，然后選項卡按鈕變成元素，并通過屬性與輸入框的相關聯，這樣，點擊選項按鈕會觸發輸入框的行為，觸發錨點定位，實現選項卡切換效果。

利用錨點的思想可以實現一個簡單的選項卡切換效果。
頁面布局及樣式：


  1
  2
  3
  4


  1
  2
  3
  4
 

......

.box {
   height: 10em;
   border: 1px solid #ffffd;
   overflow: hidden;
}
.list {
   line-height: 10em;
   background: #ffffd;
}

容器設置了 overflow:hidden，且每個列表高度和容器的高度一樣高，這樣保證永遠只顯示一個列表。當我們點擊按鈕，如第三個按鈕，會改變 URL 地址的錨鏈為#three，從而觸發 id 為 three 的第三個列表發生的錨點定位，也就是改變容器滾動高度讓列表 3 的上邊緣和滾動容器上邊緣對齊，從而實現選項卡效果。

但是這種方式有一定的不足之處：

其一，容器高度需要固定;

其二，錨點定位會觸發窗體的重定位，也就是如果頁面可以滾動，那么點擊選項頁面也會發生跳動

為了改變這種情況，下面利用下面的方式。頁面布局為:

這樣寫就算頁面窗體就有滾動條，絕大多數情況下，也都不會發生跳動現象。其原理就是在每個列表里塞入一個肉眼看不見的輸入框，然后選項卡按鈕變成元素，并通過 for 屬性與輸入框的 id 相關聯，這樣，點擊選項按鈕會觸發輸入框的 focus 行為，觸發錨點定位，實現選項卡切換效果。

但是上面這種技術要想用在實際項目中還離不開JavaScript 的支持，一個是選項卡按鈕的選中效果，另一個就是處理列表部分區域在瀏覽器外面時依然會跳動的問題。
相關處理類似下面的做法，使用 jQuery 語法:

$("label.click").removeAttr("for").on("click", function() { $(".box").scrollTop(xxx); "xxx"表示滾動數值
});

學習總結于張鑫旭老師的CSS世界第6章

云服務器 GPU云服務器 TAB切換選項卡 jquery選項卡切換 js選項卡切換 php選項卡效果源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114296.html

跨終端電商平臺的實現之移動端詳情頁多窗口切換（選項卡）效果實現

摘要：在移動端的商品詳情頁涉及多個內容切換的問題，這里使用選項卡設計方式，使用選項卡的設計是各大主流電商平臺所采用主要形式，例如淘寶和京東。然后構造第二個函數，根據傳入的現在選項卡的和要顯示選項卡的，在條件語句中執行相應的滑動函數。在移動端的商品詳情頁涉及多個內容切換的問題，這里使用選項卡設計方式，使用選項卡的設計是各大主流電商平臺所采用主要形式，例如淘寶和京東。簡單的選項卡實現起來比較容...

劉明 2019-08-20 18:01 評論0 收藏0
跨終端電商平臺的實現之移動端詳情頁多窗口切換（選項卡）效果實現

摘要：在移動端的商品詳情頁涉及多個內容切換的問題，這里使用選項卡設計方式，使用選項卡的設計是各大主流電商平臺所采用主要形式，例如淘寶和京東。然后構造第二個函數，根據傳入的現在選項卡的和要顯示選項卡的，在條件語句中執行相應的滑動函數。在移動端的商品詳情頁涉及多個內容切換的問題，這里使用選項卡設計方式，使用選項卡的設計是各大主流電商平臺所采用主要形式，例如淘寶和京東。簡單的選項卡實現起來比較容...

sf_wangchong 2019-08-29 12:56 評論0 收藏0
跨終端電商平臺的實現之移動端詳情頁多窗口切換（選項卡）效果實現

摘要：在移動端的商品詳情頁涉及多個內容切換的問題，這里使用選項卡設計方式，使用選項卡的設計是各大主流電商平臺所采用主要形式，例如淘寶和京東。然后構造第二個函數，根據傳入的現在選項卡的和要顯示選項卡的，在條件語句中執行相應的滑動函數。在移動端的商品詳情頁涉及多個內容切換的問題，這里使用選項卡設計方式，使用選項卡的設計是各大主流電商平臺所采用主要形式，例如淘寶和京東。簡單的選項卡實現起來比較容...

leon 2019-08-01 17:09 評論0 收藏0
MUI框架開發HTML5手機APP(二)--頁面跳轉傳值&底部選項卡切換

摘要：三底部選項卡切換頁面底部選項卡的切換，可以說是的標志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區別顧名思義，模式是將所有子頁面的內容，分別放置到主頁不同的中，當我們點擊主頁的不同選項卡時，切換不同的顯示。概述 JRedu 　　在上一篇博客中，我們學習了如何使用Hbuilder創建一個APP，同時如何使用MUI搭建屬于自己的第一款APP，沒有學習的同學可以戳鏈接學習： http...

番茄西紅柿 2019-04-23 13:37 評論0 收藏0
完美實現一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評論0 收藏0