移动端tab切换：js实现滑动下划线动画

本文档详细介绍了如何使用JavaScript在移动端实现tab切换时的动态下划线滑动效果。这个效果旨在增强用户界面的交互性，当用户点击不同的tab时，当前选中的tab下方会出现一条渐变宽度的下划线，同时，之前的下划线会逐渐消失，整个过程伴随着平滑的过渡动画。作者使用HTML和CSS结合JavaScript来完成这一功能。 首先，HTML部分定义了一个flex布局的无序列表（ul），包含多个带有`data-index`属性的li元素，分别代表不同的tab选项。每个li元素都有一个伪元素`:before`，用于创建下划线，初始时宽度为0，颜色为红色，设置了过渡效果以便于动画展示。 CSS样式中，`li`元素设置为相对定位，`::before`伪元素用于绘制下划线，它的初始位置在li元素的右侧，宽度、高度均为100%，并带有边框样式。当选中的tab改变时，`.active`类会被添加到对应的li上，此时`::before`的样式会改变：宽度变为100%，移动到li的左侧，并且顶部对齐。 为了实现鼠标悬停时的过渡效果，`.hover::before`定义了当鼠标悬停在li上时，下划线宽度扩展两倍的样式。通过JavaScript，我们可以监听`li`元素的`click`事件，当用户点击时，切换对应的`data-index`值，同时更新`.active`类，触发CSS中的过渡效果。 总结来说，这篇文章的核心知识点包括： 1. 利用CSS的伪元素和过渡效果创建动态的下划线动画。 2. JavaScript处理用户交互，通过`addEventListener`监听`click`事件。 3. 判断当前选中项并应用`.active`类，控制下划线的显示和隐藏。 4. 实现悬停效果，增强用户体验。 掌握这些原理后，开发者可以根据需要轻松地将此滑动效果应用到自己的移动端项目中，提升界面的视觉吸引力和易用性。随着文档的持续更新，还会有更多关于其他下划线滑动动画的实现方法供读者参考。