同原理用jQuery和Vue实现的Tab选项卡网页特效

      Tab选项卡网页特效，是我们写页面时经常用到的，下面的这两个效果是一样的，原理都是利用索引值来做的，样子很简单没花很多时间去美化下，凑合着看吧。第一个用jQuery实现的，第二个用vue实现，就是不用操作Dom了，逻辑代码就一个索引值的事，我感觉还是vue实现的更简单吧。

1.jQuery实现的Tab选项卡，代码如下：

*{padding:0;margin:0;}
body{font-size:12px;padding:100px;}
ul {list-style-type:none;}
.box ul{height:30px;line-height:30px;}
.box ul li{float:left;padding:0 10px;position:relative;
cursor:pointer;border:1px solid #000;margin-right:5px;
border-bottom:none;border-radius: 4px;}
.content{width:225px;border:1px solid #000;
padding:10px;height:100px;}
* html .content{margin-top:-1px;}
.box ul li.one{background:red;}






菜单一
菜单二
菜单三
菜单四



内容一