<template>
<div>
<div v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)" :class="{ 'active': activeTab === index }">
{{ tab.name }}
</div>
<div v-show="activeTab === tabIndexToShow">
<!-- Content of the active tab goes here -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ name: 'Tab 1' },
{ name: 'Tab 2' },
{ name: 'Tab 3' }
],
activeTab: 0,
tabIndexToShow: 0
};
},
methods: {
changeTab(index) {
this.activeTab = index;
this.tabIndexToShow = index;
}
}
};
</script>
<style>
.active {
/ Define styles for the active tab here /
font-weight: bold;
color: blue;
/ Add any other styles as needed /
}
</style>