<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="root" class="container"> <tabs> <tab name="About Us" :selected="true"> <h1>Content about us</h1> </tab> <tab name="About Out Culture"> <h1>Content about our culture</h1> </tab> <tab name="About Our Vision"> <h1>Content about our vision</h1> </tab> </tabs> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://www.dropbox.com/sh/4gwldryued53ne7/AAARjUVtB5xWKW3vlJEOEbzFa/hall_of_fame?dl=0"></script>

Vue.component('tabs', { template: ` <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{tab.name}}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> `, data() { return { tabs: [] }; }, created() { this.tabs = this.$children; }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }) } } }); Vue.component('tab', { template: ` <div v-show="isActive"><slot></slot></div> `, props: { name: { required: true }, selected: { default: false } }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, data() { return { isActive: false } }, mounted() { this.isActive = this.selected; } }) new Vue({ el: '#root' })