在下面代码中实现web页面滑动到指定内容内容对应的导航链接高亮template div class=main div class=navback div class=nav template v-for=navItem index in componentList div clickprevent=goAnchornavIte
在上述代码中,实现了点击导航链接时页面滑动到对应的内容,并且对应的导航链接高亮显示。
具体实现步骤如下:
-
在
data中添加一个变量findIndex,用于记录当前高亮的导航链接的索引,默认为0。 -
在导航链接的
<div>标签中添加@click.prevent="goAnchor(navItem.id, index)",并将navItem.id和index作为参数传递给goAnchor方法。 -
在
goAnchor方法中,使用document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })实现页面滑动到指定内容的效果。 -
在
goAnchor方法中,将index赋值给findIndex,用于控制导航链接的高亮显示。 -
在导航链接的
<div>标签中,使用:class绑定nav_active类,当index等于findIndex时,导航链接会添加nav_active类,实现高亮显示效果。
通过以上步骤,即可实现web页面滑动到指定内容,并且内容对应的导航链接高亮的功能
原文地址: https://www.cveoy.top/t/topic/iEKA 著作权归作者所有。请勿转载和采集!