在上述代码中,实现了点击导航链接时页面滑动到对应的内容,并且对应的导航链接高亮显示。

具体实现步骤如下:

  1. data中添加一个变量findIndex,用于记录当前高亮的导航链接的索引,默认为0。

  2. 在导航链接的<div>标签中添加@click.prevent="goAnchor(navItem.id, index)",并将navItem.idindex作为参数传递给goAnchor方法。

  3. goAnchor方法中,使用document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })实现页面滑动到指定内容的效果。

  4. goAnchor方法中,将index赋值给findIndex,用于控制导航链接的高亮显示。

  5. 在导航链接的<div>标签中,使用:class绑定nav_active类,当index等于findIndex时,导航链接会添加nav_active类,实现高亮显示效果。

通过以上步骤,即可实现web页面滑动到指定内容,并且内容对应的导航链接高亮的功能

在下面代码中实现web页面滑动到指定内容内容对应的导航链接高亮template div class=main div class=navback div class=nav template v-for=navItem index in componentList div clickprevent=goAnchornavIte

原文地址: https://www.cveoy.top/t/topic/iEKA 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录