您现在的位置是：网站首页>前端技术>VueVue

VUE 简单的TAB实现

神夜2018-10-26 12:23:09【Vue】4955人已围观文章来源：PHP中文网

简介

 <ul>
        <li class="tabli on" @click="tab($event,0)">商品信息</li>
        <li class="tabli"    @click="tab($event,1)">商品描述</li>
        <li class="tabli"    @click="tab($event,2)">商品分享</li>
</ul>
<div class="tabcon" style="display:block">商品信息 </div>
<div class="tabcon" style="display:none">商品描述 </div>
<div class="tabcon" style="display:none">商品分享 </div>

<script>
export default {
  data() {
    return {      
    };
  },
  methods: { 
    //TAB
    tab(index) {
       var tabcon = document.getElementsByClassName('tabcon');  
       var tabli  = document.getElementsByClassName('tabli'); 
       for(var i = 0; i< tabcon.length; i++){
         if(i==index){
           tabli[i].setAttribute("class","tabli on"); 
           tabcon[i].style.display = "block"; 
         }else{ 
           tabli[i].setAttribute("class","tabli");
           tabcon[i].style.display = "none"; 
         }
       }       
    }  
  }
}
</script>

上一篇： VUE 后台框架左侧菜单折叠效果实现超简单

下一篇：VUE实现阿拉伯数字转大写