需求:点击tab高亮并定位到对应名字锚点
在这里插入图片描述
问题:点击第一次跳转锚点,但是并不高亮
代码:

<a @click="handleClick(0)" :class="[activeId===0?'text-active':'text']" href="#discount">优惠活动({{info.discount||0}}</a>
      <a @click="handleClick(1)" :class="[activeId===1?'text-active':'text']" href="#service">服务({{detailInfo.serviceList?.length||0}}</a>
      <a @click="handleClick(2)" :class="[activeId===2?'text-active':'text']" href="#evaluate">用户评价({{comment.total||0}}</a>

// 模块锚点
const handleClick=(index:number)=>{

  activeId.value=index
  
}

activeId为高亮id,函数输出改变,页面id未变
解决:禁用href,因为上面方法改变路由导致点击事件有问题

<a @click="linkPage('#Discount'); activeId = 0" :class="[activeId===0?'text-active':'text']" href="javascript:void(0)">优惠活动({{info.discount||0}}</a>
      <a @click="linkPage('#Service');activeId = 1" :class="[activeId===1?'text-active':'text']" href="javascript:void(0)">服务({{detailInfo.serviceList?.length||0}}</a>
      <a @click="linkPage('#Evaluate');activeId = 2" :class="[activeId===2?'text-active':'text']" href="javascript:void(0)">用户评价({{comment.total||0}}</a>
Logo

前往低代码交流专区

更多推荐