<ul id="kmsmc"></ul>

<fieldset id="kmsmc"></fieldset>

tab 切換下劃線跟隨實現

antz 發布于2019-08-23 12:01 / 1416人閱讀

摘要：代碼大致如下點擊跟隨結合使用類即可實現點擊跟隨使用參考資料不可思議的光標下劃線跟隨效果不可思議的純導航欄下劃線跟隨效果切換下劃線跟隨實現

HTML 結構如下：


  不可思議的CSS
  導航欄
  光標小下劃線跟隨
  PURE CSS
  Nav Underline

導航欄目的 li 的寬度是不固定的

當從導航的左側 li 移向右側 li，下劃線從左往右移動。同理，當從導航的右側 li 移向左側 li，下劃線從右往左移動。

設計思路 :

利用絕對定位，將 li 的偽元素的寬度設置為 0

在 hover 的時候，寬度從 width: 0 -> width: 100%

左移左出，右移右出 :

將下劃線的 left 偏移量初始位置設置為 left: 100%

當鼠標 hover 的時候， left 偏移量設置為 0

使用 ~ 選擇符，改變當前選擇元素之后所有元素的行為 :
在不改變當前 hover 的 li 的下劃線移動方式，而改變它下一個 li 的下劃線的移動方式，
對于當前 hover 的 li ，其對應偽元素的下劃線的定位是 left: 100%，而對于 li:hover ~li::before，它們的定位是 left: 0。

神奇的 ~ 選擇符

所以，我們迫切需要一種方法，能夠不改變當前 hover 的 li 的下劃線移動方式卻能改變它下一個 li 的下劃線的移動方式（好繞口）。

沒錯了，這里我們可以借助 ~ 選擇符，完成這個艱難的使命，也是這個例子中，最最重要的一環。

對于當前 hover 的 li ，其對應偽元素的下劃線的定位是 left: 100%，而對于 li:hover ~ li::before，它們的定位是 left: 0。CSS 代碼大致如下：

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}
 
li:hover::before {
    width: 100%;
    left: 0;
}
 
li:hover ~ li::before {
    left: 0;
}

點擊 tab 跟隨

結合 js 使用 active 類即可實現點擊 tab 跟隨

.active ~ li::before {
  left: 0;
}
.active::before {
  width: 100%;
  left: 0;
  top: 0;
}

// 使用 jquery

$("li").on("click", function () {
  $(this).addClass("active").siblings().removeClass("active")
})

參考資料

不可思議的CSS光標下劃線跟隨效果
GitHub - chokcoco/iCSS
不可思議的純CSS導航欄下劃線跟隨效果
tab 切換下劃線跟隨實現

云服務器 GPU云服務器 js實現tab切換 tab切換 Tab標簽切換 tab滑動切換

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

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

tab 切換下劃線跟隨實現

摘要：代碼大致如下點擊跟隨結合使用類即可實現點擊跟隨使用參考資料不可思議的光標下劃線跟隨效果不可思議的純導航欄下劃線跟隨效果切換下劃線跟隨實現 showImg(https://segmentfault.com/img/bVbg4wM?w=699&h=91); HTML 結構如下：不可思議的CSS 導航欄光標小下劃線跟隨 PURE CSS Nav Underline ...

googollee 2019-08-02 16:05 評論0 收藏0
tab 切換下劃線跟隨實現

摘要：代碼大致如下點擊跟隨結合使用類即可實現點擊跟隨使用參考資料不可思議的光標下劃線跟隨效果不可思議的純導航欄下劃線跟隨效果切換下劃線跟隨實現 showImg(https://segmentfault.com/img/bVbg4wM?w=699&h=91); HTML 結構如下：不可思議的CSS 導航欄光標小下劃線跟隨 PURE CSS Nav Underline ...

CODING 2019-08-30 15:54 評論0 收藏0
TabLayout的簡單運用和若干問題的解決

摘要：初步實現之前在知乎上看到有人對微信的設計改動將使用頻率高的朋友圈消息提醒和公眾號這三個功能獨立出來放在首頁。 1、介紹和準備我們在使用手機App時不難會看到這樣的頁面上面是一組起導航作用的標簽，點擊標簽就會切換到相應的頁面；在不同的頁面中滑動時，標簽的樣式（文字大小或者顏色）也會發生變化。這樣你任何時候都能一眼看出自己停留在哪個頁面。這個布局出鏡率實在太高了，我甚至敢說每個學Andr...

PiscesYE 2019-08-14 18:37 評論0 收藏0