福建建筑人才服务中心档案,wordpress插件带seo,企业名录2021版,网站注册域名与制作用Vue实现选项卡效果。
效果演示 点击CSS 点击Vue 看起来是不是有点菜单导航的感觉#xff0c;下面跟随我一起来一探究竟#xff1f;
代码演示
**注意#xff1a;**引入Vue.js架包 !DOCTYPE htmlhtmlheadmeta charsetutf-8 /下面跟随我一起来一探究竟
代码演示
**注意**引入Vue.js架包 !DOCTYPE htmlhtmlheadmeta charsetutf-8 / titleVue选项卡/titlescript typetext/javascript srcjs/vue.js/script/headstyle* {padding: 0;margin: 0;}.box {width: 800px;height: 200px;margin: 0 auto;border: 1px solid #000;}.tabs li {float: left;margin-right: 8px;list-style: none;}.tabs .tab-link {display: block;width: 250px;height: 39px;text-align: center;line-height: 49px;font-size: 20px;background-color: #5597B4;color: #fff;text-decoration: none;}.tabs .tab-link.active {height: 47px;border-bottom: 5px solid blueviolet;transition: .3s;}.card {float: center;}.card .cards {display: none;}.clearfix:after {content: ;display: block;height: 0;clear: both;}.clearfix {zoom: 1;}/stylebodydiv idapp classboxul classtabs clearfixli v-for(tab,index) in tabsNamea href# classtab-link clicktabsSwitch(index) v-bind:class{active:tab.isActive}{{tab.name}}/a/li/uldiv classcarddiv classcards styledisplay: block;我是前端HTML/divdiv classcards我是前端CSS/divdiv classcards我是前端Vue/div/div/div/bodyscriptvar app new Vue({el: #app,data: {tabsName: [{name: HTML,isActive: true}, {name: CSS,isActive: false}, {name: Vue,isActive: false}],active: false},methods: {tabsSwitch: function(tabIndex) {var tabCardCollection document.querySelectorAll(.cards),len tabCardCollection.length;for(var i 0; i len; i) {tabCardCollection[i].style.display none;this.tabsName[i].isActive false;}this.tabsName[tabIndex].isActive true;tabCardCollection[tabIndex].style.display block;}}})/script/html
