手写tab选中

<div class="appBox">
   <div class="navBox">
     <p class="navItemBox" v-for="(item) in navList" :key="item.id" :class="activeNav == item.id ? 'activeText':''"
       @click="scrollToTarget(item.id)">
       <span>{{item.title}}</span>
     </p>
   </div>

   <div class="navContentBox">
     <div id="allApp" class="content-section">
       全部
     </div>
     <div id="app1" class="content-section">
       应用1
     </div>
     <div id="app2" class="content-section">
       应用2
     </div>
     <div id="app3" class="content-section">
       应用3
     </div>
     <div id="app4" class="content-section">
       应用4
     </div>
   </div>
</div>


<script setup>
import { ref, onMounted, reactive, } from 'vue'
// import { queryJgAPI, } from '@/api/instruct'
import { ElMessage, ElMessageBox } from 'element-plus';

// 记录当前激活的导航项（可选，用于高亮）
const activeNav = ref('allApp');

const navList = ref([
  { id:'allApp', title: '全部', },
  { id:'app1', title: '应用1', },
  { id:'app2', title: '应用2', },
  { id:'app3', title: '应用3', },
  { id:'app4', title: '应用4', },
])

const state = reactive({})

// 核心滚动方法
const scrollToTarget = (key) => {
  // 1. 更新激活状态（高亮当前项）
  activeNav.value = key;
  // 2. 找到右侧目标元素
  const target = document.getElementById(key);
  if (target) {
    // 3. 平滑滚动到目标元素
    target.scrollIntoView({
      behavior: 'smooth', // 平滑滚动（去掉则立即跳转）
      block: 'start' // 对齐到元素顶部（可选：center/end）
    });
  }
};

onMounted(()=>{})
</script>
<style>
.appBox{
   width: 100%;
   height: 100%;
   background-color: #fff;

   .navBox{
     display: flex;
     gap: 40px;
     align-items: center;
     padding: 8px 30%;
     font-weight: 600;

     .navItemBox{
       position: relative;
       padding: 10px;
     }
   }
   .activeText{
     &:after{
       content: '';
       display: block;
       position: absolute;
       bottom: 0;
       left: 50%;// 从中间开始
       transform: translateX(-50%);// 向左偏移自身宽度的一半，实现居中
       width: 40px; // 默认宽度为 0
       height: 3px;
       border-radius: 2px;
       transition: width 0.3s ease;  
       background-color: #426deb;
     }
   }

   .navContentBox{
     height: 98%;
     overflow: auto;
     
     .content-section{
       height: 40%;
       // background-color: pink;
     }
   }
 }
</style>