效果图： 主要思路： 点击不同 tab 获取 tab 选项卡下标并为其动态绑定一个class(选中状态时的样式) 点击时使 tab 对应的内容下标与 tab 选项卡下标保持一致 使用 v-show / v-if 指令控制内容显示与隐藏 源码： ...

欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中… ...

tab选项卡切换效果： 通过点击事件传入参数，然后通过v-show来进行切换显示 当我们选项卡增多的时候，代码量也会增大，所以我们可以使用v-for来优化一下代码： ...

上代码： <template> <div class="push"> //点击按钮 <div class="tab"> 　　//tab被点击的几个按钮需要被循环出来，方便获取其index ...

<div id='test'> <ul class="nav" > <li v-for='(item,index) in dataNav' @click='tabCli ...

本选项卡基于prototype.js 参数说明:　　tab_id: 选项卡ID　　tab_cont_id: 选项内容ID 可选参数：　　defaultTab: 默认选择的选项卡序号　　selectCss: 选中时的样式名称　　mouseEvent: 选中选项卡的鼠标方法 ...

效果图： 默认选中 科技 当鼠 ...

Html代码如下 View Code Jquery代码如下 View Code 效果图如下 ...