在下面代码中实现web页面滑动界面到指定内容内容对应的导航链接高亮template div class=main div class=navback div class=nav template v-for=navItem index in componentList div clickprevent=goAnchornavI
在上面的代码中,实现了点击导航链接后,页面滑动到对应的内容,并且对应的导航链接高亮显示。
具体实现步骤如下:
-
在
data中添加一个findIndex属性,用于记录当前高亮显示的导航链接的索引。 -
在导航链接的
div标签中添加@click.prevent="goAnchor(navItem.id, index)",当点击导航链接时,调用goAnchor方法。 -
在
goAnchor方法中,使用document.querySelector获取对应的内容元素,然后调用scrollIntoView方法将页面滑动到该内容处。并且将findIndex设置为当前导航链接的索引,以便在模板中动态添加nav_active类名,实现高亮显示。 -
在导航链接的
div标签中使用:class绑定nav_active类名,当index === findIndex时,添加nav_active类名。
这样就实现了点击导航链接后,页面滑动到对应的内容,并且高亮显示对应的导航链接。
原文地址: https://www.cveoy.top/t/topic/iEKB 著作权归作者所有。请勿转载和采集!