前端自定义tab点击效果

前端自定义tab点击效果前端自定义tab点击效果前端自定义tab点击效果前端自定义tab点击效果前端自定义tab点击效果前端自定义tab点击效果前端自定义tab点击效果

<template>
  <div>
    <div class="tab-buttons">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: activeTab === index }"
        @click="handleTabClick(index)"
      >
        {{ tab }}
      </button>
    </div>
    <div class="tab-content">
      <p v-if="activeTab === 0">这是第一个 tab 的内容。</p>
      <p v-if="activeTab === 1">这是第二个 tab 的内容。</p>
      <p v-if="activeTab === 2">这是第三个 tab 的内容。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestName', 
  data() {
    return {
      tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
      activeTab: 0
    };
  },
  methods: {
    handleTabClick(index) {
      this.activeTab = index;
    }
  }
};
</script>

<style scoped>
.tab-buttons {
  display: flex;
}

.tab-buttons button {
  padding: 10px 20px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
}

.tab-buttons button.active {
  background-color: #007bff;
  color: white;
}

.tab-content {
  padding: 20px;
  border: 1px solid #f0f0f0;
}
</style>