tab 切换下划线跟随实现

googollee 发布于2019-08-02 16:05 / 839人阅读

摘要：代码大致如下点击跟随结合使用类即可实现点击跟随使用参考资料不可思议的光标下划线跟随效果不可思议的纯导航栏下划线跟随效果切换下划线跟随实现

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滑动切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54651.html

tab 切换下划线跟随实现

摘要：代码大致如下点击跟随结合使用类即可实现点击跟随使用参考资料不可思议的光标下划线跟随效果不可思议的纯导航栏下划线跟随效果切换下划线跟随实现 showImg(https://segmentfault.com/img/bVbg4wM?w=699&h=91); HTML 结构如下：不可思议的CSS 导航栏光标小下划线跟随 PURE CSS Nav Underline ...

antz 2019-08-23 12:01 评论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