原文链接：
1、js实现移动端tab切换时下划线滑动效果
2、tab 切换下划线跟随实现

1、当前 tab 出现下划线的同时，前一个下划线同时消失（出现方向与消失方向保持一致），伴随过渡效果。
tab 切换下划线跟随实现 - 图1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74		 <!DOCTYPE html>
<``html lang``=``"en"``>
<``head``>
``<``meta charset``=``"UTF-8"``>
``<``title``>change tab</``title``>
``<``style``>
``ul {
``display: flex;
``position: absolute;
``width: 800px;
``top: 50%;
``left: 50%;
``transform: translate(-50%, -50%);
``list-style: none;
``}
``li {
``position: relative;
``padding: 20px;
``color: #000;
``line-height: 1;
``transition: 0.2s all linear;
``cursor: pointer;
``}
``li::before {
``content: "";
``position: absolute;
``top: 0;
``left: 100%;
``width: 0;
``height: 100%;
``border-bottom: 2px solid #f00;
``transition: 0.2s all linear;
``}
`<br /> li:active {`<br />` background: #000;<br /> color: #fff;`<br />` }<br /> <br /> .active ~ li::before {`<br />` left: 0;<br /> }`<br />` .active::before {<br /> width: 100%;`<br />` left: 0;<br /> top: 0;`<br />` }<br /> .hover::before{`<br />` width: 200%;<br /> }`<br />` </style><br /></head><br /><body><br /> <ul>`<br />` <li` `class="active tab"` `data-index='0'> 张杰 </li><br /> <li`class``=``"tab" data-index``=``'1'``>周杰伦</``li``>
``<``li class``=``"tab" data-index``=``'2'``>林俊杰</``li``>
``<``li class``=``"tab" data-index``=``'3'``>薛之谦</``li``>
``<``li class``=``"tab" data-index``=``'4'``>你</``li``>
``</``ul``>
</``body``>
<``script``>
``var lis = document.getElementsByClassName('tab');
``for(var i=0; i<``lis.length``; i++){
``lis[i]``.onclick = ``function``(){
``var ``that = ``this``;
``for(var ``i``=``0``; i<lis.length; i++){
``lis[i].classList.remove('active')
``this.classList.add('active')
``}
``}
``}
</script>
</``html``>

tab 切换下划线跟随实现 - 图2

  • HTML 结构如下： ```
    • 不可思议的CSS
    • 导航栏
    • 光标小下划线跟随
    • PURE CSS
    • Nav Underline
    8. ```
  • 导航栏目的 li 的宽度是不固定的
  • 当从导航的左侧 li 移向右侧 li，下划线从左往右移动。同理，当从导航的右侧 li 移向左侧 li，下划线从右往左移动。

    设计思路 :

  1. 利用绝对定位，将 li 的伪元素的宽度设置为 0
  2. 在 hover 的时候，宽度从 width: 0 -> width: 100%
  3. 左移左出，右移右出 :
    • 将下划线的 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 代码大致如下： ```
  4. li::before {
  5. content: “”;
  6. position: absolute;
  7. top: 0;
  8. left: 100%;
  9. width: 0;
  10. height: 100%;
  11. border-bottom: 2px solid #000;
  12. transition: 0.2s all linear;
  13. }
  15. li:hover::before {
  16. width: 100%;
  17. left: 0;
  18. }
  20. li:hover ~ li::before {
  21. left: 0;
  22. }
    1. <a name="GyfSo"></a>
    2. ## 点击 tab 跟随
    3. 结合 js 使用 active 类即可实现 点击 tab 跟随
  23. .active ~ li::before {
  24. left: 0;
  25. }
  26. .active::before {
  27. width: 100%;
  28. left: 0;
  29. top: 0;
  30. }
    1. // 使用 jquery
  31. $(‘li’).on(‘click’, function () {
  32. $(this).addClass(‘active’).siblings().removeClass(‘active’)
  33. }) ```

    参考资料

    不可思议的CSS光标下划线跟随效果
    GitHub - chokcoco/iCSS
    不可思议的纯CSS导航栏下划线跟随效果
    tab 切换下划线跟随实现