基于Swiper实现的列表切换效果_swiper重新渲染资源-CSDN文库

共5个文件

css：2个

js：2个

html：1个

Swiper

列表切换

5星 · 超过95%的资源需积分: 33 143 浏览量 2015-09-08 11:06:19 上传评论 1 收藏 50KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

tab_demo.rar （5个子文件）

tab_demo

index.html 2KB

swiper.jquery.min.js 56KB

jquery-1.7.2.min.js 93KB

css

swiper.min.css 14KB

style.css 2KB

<!DOCTYPE html> <html> <head lang="en">  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  <meta http-equiv="keywords" content=""/>  <meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no">  <meta name="apple-mobile-web-app-capable" content="yes">  <meta name="apple-mobile-web-status-bar-style" content="block" />  <meta name="fromat-detecition" content="telephone=no" /> <title>订单</title> <link href="css/swiper.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="wrapper">  <div class="maple-tab clearFix"> <ul> <li class="active"><p class="m-border-right">订单状态</p></li> <li><p>订单详情</p></li> </ul> </div>  <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tab-content-1">列表1内容</div> <div class="swiper-slide tab-content-2">列表2内容</div> </div> </div> </div> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/swiper.jquery.min.js"></script> <script> $(function () { var mySwiper = new Swiper('.swiper-container', { onSlideChangeEnd: function (swiper) { var j=mySwiper.activeIndex; $('.maple-tab li, .maple-tab2 li').removeClass('active').eq(j).addClass('active'); } }) /*列表切换*/ $('.maple-tab li, .maple-tab2 li').on('click', function (e) { e.preventDefault(); //得到当前索引 var i=$(this).index(); $('.maple-tab li, .maple-tab2 li').removeClass('active').eq(i).addClass('active'); mySwiper.slideTo(i,1000,false); }); }); </script> </body> </html>

评论收藏

内容反馈