本文长度为 1751字，建议阅读 5 分钟
▼▼▼
▼▼
▼
效果
*
经常看到一些网页的导航栏点击切换时，不仅改变当前样式，同时下划线会跟随鼠标点击的标签栏缓慢滑到相应位置，那么这个简单而又好看的效果是如何实现的呢？
实现
- 环境/依赖
- 分析
- 代码
1. 环境/依赖
- 原生JavaScript / jQuery
2. 分析
首先给出基本布局（如下）。html及css都是基础布局， active样式则是当点击某个li标签时动态添加即可。那么下划线我们如何处理呢？
// html
<ul class="menu">
<li>Hey</li>
<li>ClickMe</li>
<li>I'mIndex</li>
<li>AboutMe</li>
<li>MyCultureWall</li>
</ul>
// css
<style>
ul{display: inline-block;text-align: center;padding: 0;position: relative;list-style: none;transition: all .4s ease-in;}
ul li{display: inline-block;cursor: pointer;padding: 5px 10px;transition: all .5s ease-in;}
.active{color: deepskyblue;transition: all .5s ease-in;}
</style> 第一反应肯定是使用 border-bottom。如果仅仅是切换，那么它完全可以满足需求，但是前面我们提到了，要 动起来，显然，border暂时还做不到这一步。 此路不通，next one.如果我们用一个新的div来绑定到当前ul上，是否能满足需求呢？have a try.我在li标签同级增加一个div元素，给出一个定高不定宽的线段，宽度则跟随当前所点击的li标签走。然后定位在ul下方，这样视觉效果则是下划线位置。思路明确了，接下来要做的就是在js中来获取想要的宽度和定位左边距即可。
3. 代码
代码语言：javascript复制// html
<ul class="menu">
<li>Hey</li>
<li>ClickMe</li>
<li>I'mIndex</li>
<li>AboutMe</li>
<li>MyCultureWall</li>
<div class="slider"></div>
</ul>
// css
<style>
ul{display: inline-block;text-align: center;padding: 0;position: relative;list-style: none;transition: all .4s ease-in;}
ul li{display: inline-block;cursor: pointer;padding: 5px 10px;transition: all .5s ease-in;}
.active{color: deepskyblue;transition: all .5s ease-in;}
.slider{width: 0;height: 3px;position: relative;transition: all .5s ease-in;}
</style>
// js
<script>
$('.menu').on('click', 'li', function () {
// 获取所需要的 宽、左边距， 此处新增一个随机色
let liWidth = $(this).width(),
offsetLeft = $(this).offset().left,
color = `rgba(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},0.9)`;
// 点击时，当前标签添加active样式，‘下划线’也随之变化
$(this).addClass('active').siblings().removeClass('active');
$('.slider').css({'width': `${liWidth}px`,'left': `${offsetLeft}px`,'background': `${color}`});
})
</script>
