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

VUE 简单的TAB实现

神夜2018-10-26 12:23:09Vue3093人已围观文章来源: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>

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:461条
  • 微信公众号:扫描二维码,关注我们