您现在的位置是:网站首页>前端技术>VueVue
VUE 简单的TAB实现
神夜2018-10-26 12:23:09【Vue】4958人已围观文章来源: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实现阿拉伯数字转大写
本栏推荐
猜你喜欢
站点信息
- 建站时间:2017-10-24
- 网站程序:Hsycms 3.0
- 文章统计:511条
- 微信公众号:扫描二维码,关注我们