制作滑块以突出显示导航栏上的活动 link
Making a slider to highlight active link on a navbar
在问题本身之前，我想说我对 Css、Js 和 html 有足够的经验，我这里的问题更多的是从哪里开始而不是细节。
现在的问题是：想象一下单页应用程序中的导航栏（这意味着每次单击导航时页面都不会重新加载 link，我们有一种样式可以突出显示活动导航 link（[=28= 下的一行，[=28= 下的一个图标]，不同的背景颜色等）我们希望荧光笔从之前激活的“移动”（所以我们需要动画） link 到新的，这意味着我们不添加和删除项目或使用显示 none 和块来做，它需要是一个项目去激活 link.
现在，当您的导航 link 具有固定宽度、绝对定位并使用左右（侧边栏的顶部和底部）属性并使用荧光笔时，这真的很容易与 links 相同的宽度（或高度）但是：
如果我想为非固定宽度元素做这件事怎么办，这意味着我的导航项的 space 来自 padding/margin 或 flexbox 容器，那么不仅荧光笔需要移动，而且它可能需要根据 link 的大小更改大小，并且它的位置没有固定的移动量。
你可以在 youtube 上看到这样的例子：
[1]: https://i.stack.imgur.com/RdFOG.png
[2]: https://i.stack.imgur.com/OlACD.png
如您所见，边框在活动 link 下方，但它在社区 link 上的尺寸比关于 link 的要大（因为社区是一个更宽的词).
如果您依靠 flexbox 容器来定位您的导航项，则您将不得不使用更多 JavaScript 来确定将滑块定位在何处。
这里的“神奇”方法是Element.getBoundingClientRect(...)。浏览器对此的支持非常好，唯一的例外是 x 和 y 属性，您很可能不需要这些属性。
使用返回的矩形中的值，您可以修改滑块的样式，即使用 left 和 width 属性将它们应用到滑块。
在问题本身之前，我想说我对 Css、Js 和 html 有足够的经验，我这里的问题更多的是从哪里开始而不是细节。
现在的问题是：想象一下单页应用程序中的导航栏（这意味着每次单击导航时页面都不会重新加载 link，我们有一种样式可以突出显示活动导航 link（[=28= 下的一行，[=28= 下的一个图标]，不同的背景颜色等）我们希望荧光笔从之前激活的“移动”（所以我们需要动画） link 到新的，这意味着我们不添加和删除项目或使用显示 none 和块来做，它需要是一个项目去激活 link.
现在，当您的导航 link 具有固定宽度、绝对定位并使用左右（侧边栏的顶部和底部）属性并使用荧光笔时，这真的很容易与 links 相同的宽度（或高度）但是：
如果我想为非固定宽度元素做这件事怎么办，这意味着我的导航项的 space 来自 padding/margin 或 flexbox 容器，那么不仅荧光笔需要移动，而且它可能需要根据 link 的大小更改大小，并且它的位置没有固定的移动量。
你可以在 youtube 上看到这样的例子： [1]: https://i.stack.imgur.com/RdFOG.png [2]: https://i.stack.imgur.com/OlACD.png
如您所见，边框在活动 link 下方，但它在社区 link 上的尺寸比关于 link 的要大（因为社区是一个更宽的词).
如果您依靠 flexbox 容器来定位您的导航项，则您将不得不使用更多 JavaScript 来确定将滑块定位在何处。
这里的“神奇”方法是Element.getBoundingClientRect(...)。浏览器对此的支持非常好，唯一的例外是 x 和 y 属性，您很可能不需要这些属性。
使用返回的矩形中的值，您可以修改滑块的样式，即使用 left 和 width 属性将它们应用到滑块。