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

Joker • • 前端笔记 • 317 阅读

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

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

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





用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;}






    
菜单一

  • 菜单二
    • 

  • 菜单三
    • 

  • 菜单四
    • 




内容一
内容二
内容三
内容四