<ul class="b-tabs">
          <li v-for="tab in tabs"
          :key="tab.id"
          :class="['tab', { 'text-primary': currentTab === tab.id }]"
          @click="changeTab(tab.id)">{{ tab.name }}</li>
        </ul>

<b-card>
        <div class="card-title text-md mb-3">1.选择营销目标</div>
        <b-row>
          <b-col v-for="(item,index) in target" :key="index">
            <div class="select-card">
              <div class="title">{{item.title}}</div>
              <div class="desc">{{item.desc}}</div>
            </div>
          </b-col>
        </b-row>
      </b-card>
<template>
  <div>
    <ul class="b-tabs">
      <li v-for="tab in tabs"
      :key="tab.id"
      :class="['tab', { 'text-primary': currentTab === tab.id }]"
      @click="changeTab(tab.id)">{{ tab.name }}</li>
    </ul>

    <b-card>
      <div class="card-title text-md mb-3">1.选择营销目标</div>
      <b-row>
        <b-col v-for="(item,index) in target" :key="index">
          <div class="select-card" :id="item.id">
            <div class="title">{{item.title}}</div>
            <div class="desc">{{item.desc}}</div>
          </div>
        </b-col>
      </b-row>
    </b-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [], // 你的tabs数据
      target: [], // 你的target数据
      currentTab: '', // 当前选中的tab
      // 其他数据...
    };
  },
  methods: {
    changeTab(id) {
      // 找到对应的元素
      const element = document.getElementById(id);
      // 如果元素存在,就滚动到该元素
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
      // 更新当前选中的tab
      this.currentTab = id;
    },
    // 其他方法...
  },
  // 其他选项...
};
</script>

在这个示例中,我们在changeTab方法中使用了document.getElementById来获取对应的元素,然后使用scrollIntoView方法来滚动到该元素。scrollIntoView方法接受一个选项对象,其中behavior: 'smooth'表示使用平滑滚动。请注意,这只是一个示例,实际的代码可能需要根据你的应用的需求进行调整。例如,你可能需要在滚动之前进行一些额外的检查,或者在滚动之后执行一些额外的操作

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注