导航栏点击选项的时候 怎么可以记住当前选项的同时能够又实现下面的线条滑动过去

Question

现在做的是刷新就是默认第一个了
以前尝试过修改href记住当前选项但是无法实现线条从上一个选项下方滑动过去
想知道有什么方法可以实现上面两个需求 或者有什么例子可以看一下的 谢谢

Answer 1

说下我之前实现的一种展示逻辑，具体代码没有找到：

• 标题列表和下划线是分开的两个块，每次选中标题后，对下划线进行位移；

具体实现有以下几种：
方法一： 通过js，在每次的标题选定触发事件中，动态修改下划线的距离，配上css3填补动画；
方法二： 通过更改class，实现下划线位移，同时配上css3填补动画；

Answer 2

https://segmentfault.com/a/11... 我这个示例还可以，你可以尝试加一个边框看看borer-bottom

Answer 3

1.每次切换之后把对应的标题id写入localstorage或者cookie，下次刷新的时候去拿，这样的弊端是，就算从其他界面进来也不会变成标题1，而是你之前存下的

2.用history.pushState("","","?id=" + id)这种方式把对应的标题id放到链接中，这样界面是不会重新刷新的