想做一个导航栏,带有点击事件,点击任意一个按钮,下划线就会以看得见的位移,移动到按钮下方。
我的思路:既然下划线是已看得见的方式位移,他自然就不可能是按钮的下边框,只能另起炉灶。创建一个div,就是下划线,接下来就把下划线相对于它的导航栏父级绝对定位。
那么问题来了,我要怎样将下划线与点击事件绑定,并且使它移动到它该去的地方呢?
附图
随着点击而移动的下划线的导航栏制作
Ineedyou
#1
Ineedyou
#3
我是有这个逻辑了,但其中有些难点不会解决。
transfrom的translateX属性是水平位移。那当我鼠标点击的时候,下划线的translateX是相对于下划线本身的位移,我要怎么确保它移动到它应该去到的地方呢。那就只能是相对于整个导航栏位移,可要怎么获取下划线相对于导航栏的位置呢,这样才能做逻辑判断,当点击第一个按钮的时候,下划线滑动到哪。具体怎么操作呢?