jQuery上下滑动选项卡效果

1、准备好需要用到的图标。

3、书写hmtl代艨位雅剖码。<div class="main-page"> &造婷用痃lt;div class="left"> <div class="nav-back"></div> <div class="nav"> <div class="on">餐饮</div> <div>电商</div> <div>旅游</div> <div>汽车</div> <div>美容</div> <div>新闻</div> <div>家居</div> <div>健康</div> </div> </div> <div class="right"> <div class="content"> <div class="con-ggh"> <div class="zcinfo fl"> <ul class="clearfix"> <li> <div class="list-pic"><img alt="" src="images/214a.png" /></div> <p class="item-name">快乐美食</p> </li> <li> <div class="list-pic"><img alt="" src="images/214.jpg" /></div> <p class="item-name">艺术蛋糕小店</p> </li> <li> <div class="list-pic"><img alt="" src="images/42f.jpg" /></div> <p class="item-name">美味餐厅</p> </li> </ul> <div class="b-intro"> <span class="dp">解决案例介绍</span> <p>为餐饮行业提供一站式解决方案，凭借到店、预约、点餐等功能，以及积分系统搭建、可视化后台数据管理等强大的技术支持。拓展店铺营销的新渠道。</p> <a href="#" class="ck-m bs tc dp">查看更多</a> </div> </div> <div class="ptpic-dl fr"><img alt="" src="images/sj-pic-pt.png" /></div> </div> </div> </div> <div class="clear"></div></div>

5、书写并添加js代码。<script src="js/jquery-1.11.1.min.js"></script><script >$(".main-page .nav div").mouseenter(function () { var $this = $(this); var index = $this.index();}).mouseleave(function () { var $this = $(this); var index = $this.index();}).click(function () { var $this = $(this); var index = $this.index(); var l = -(index * 800); $(".main-page .nav div").removeClass("on"); $(".main-page .nav div").eq(index).addClass("on"); $(".main-page .content .con-ggh:eq(0)").stop().animate({ "margin-top": l }, 500);});</script>

7、查看效果。