随着点击而移动的下划线的导航栏制作

#1

想做一个导航栏，带有点击事件，点击任意一个按钮，下划线就会以看得见的位移，移动到按钮下方。
我的思路：既然下划线是已看得见的方式位移，他自然就不可能是按钮的下边框，只能另起炉灶。创建一个div，就是下划线，接下来就把下划线相对于它的导航栏父级绝对定位。
那么问题来了，我要怎样将下划线与点击事件绑定，并且使它移动到它该去的地方呢？
附图

#2

setState配合transform

#3

我是有这个逻辑了，但其中有些难点不会解决。
transfrom的translateX属性是水平位移。那当我鼠标点击的时候，下划线的translateX是相对于下划线本身的位移，我要怎么确保它移动到它应该去到的地方呢。那就只能是相对于整个导航栏位移，可要怎么获取下划线相对于导航栏的位置呢，这样才能做逻辑判断，当点击第一个按钮的时候，下划线滑动到哪。具体怎么操作呢？

#4 
transform: `translateX(${this.state.currentIndex*100}%)`
#5

有点不理解呀，currentIndex*100 ，currentIndex指的是当前的下标对吗，可下标只是序号，不是长度，除于100是什么含义呢

#6

translateX(100%)不就是向右移动自身宽度的100%咯

#7

呀，我理解你意思了。可那只是从第一个按钮往后面点行得通而已呀，如果从第二个按钮开始就不行了。始终只能相对父级元素的位移才行得通