手机端的tab切换，响应式切换效果
之前写过这些tab切换的效果，无论网页上还是手机端，网上也有很多的例子，这个好像是我参考网上，也不知道是哪里的了。总结了一下，就当保存下来了把。
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>tab响应式切换效果</title> <link rel="stylesheet" href="css/activitylist.css"> </head> <body> <!-- 代码部分begin --> <div class="wrap"> <div class="tabs"> <a href="#" hidefocus="true" class="active">已审核</a> <a href="#" hidefocus="true">未审核</a> </div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="content-slide"> <a class="list" href=""> <span class="list_msg"> <img class="list_img" alt=""src="headImg.jpg" /> <span class="list_nt "> <span class="list_name" href="">xiuber</span><br /> <span class="list_time" href="">2016-5-23 11:14</span> </span> </span> </a> <a class="list" href=""> <span class="list_msg"> <img class="list_img" alt=""src="headImg.jpg" /> <span class="list_nt"> <span class="list_name" href="">xiuber</span><br /> <span class="list_time" href="">2016-5-23 11:14</span> </span> </span> </a> </div> </div> <div class="swiper-slide" > <div class="content-slide"> <a class="list" href=""> <span class="list_msg"> <img class="list_img" alt=""src="headImg.jpg" /> <span class="list_nt "> <span class="list_name" href="">xiuber</span><br /> <span class="list_time" href="">2016-5-23 11:14</span> </span> </span> </a> </div> </div> </div> </div> </div> <script src="jquery-1.11.3.js"></script> <script src="swiper.min.js"></script> <script> var tabsSwiper = new Swiper('.swiper-container',{ speed:500, onSlideChangeStart: function(){ $(".tabs .active").removeClass('active'); $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active'); } }); $(".tabs a").on('touchstart mousedown',function(e){ e.preventDefault() $(".tabs .active").removeClass('active'); $(this).addClass('active'); tabsSwiper.swipeTo($(this).index()); }); $(".tabs a").click(function(e){ e.preventDefault(); }); </script> <!-- 代码部分end --> </body> </html>
/******/ html,body,.wrap,.swiper-container,.swiper-wrapper{ height:100%!important; } body{margin:0;font-family:"microsoft yahei";font-size:13px;line-height:1.5;padding: 10px;} .wrap{} .tabs{height:40px;} .tabs a{display:block;float:left;width:50%;color:#333;text-align:center;line-height:40px;font-size:16px;text-decoration:none;} .tabs a.active{color:#FF0303;border-bottom: 2px solid #FF0303;} .swiper-container{height:100% !important;width:100%;border-top:0;} .swiper-slide{height:100% !important;width:100%;background:none;} .content-slide{padding:10px 0 10px 0;} .content-slide p{text-indent:2em;line-height:1.9;} .swiper-container {margin:0 auto;position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;/* Fix of Webkit flickering */ z-index:1;} .swiper-wrapper {position:relative;width:100% ; -webkit-transition-property:-webkit-transform, left, top; -webkit-transition-duration:0s; -webkit-transform:translate3d(0px,0,0); -webkit-transition-timing-function:ease; /*-moz-transition-property:-moz-transform, left, top; -moz-transition-duration:0s; -moz-transform:translate3d(0px,0,0); -moz-transition-timing-function:ease; -o-transition-property:-o-transform, left, top; -o-transition-duration:0s; -o-transform:translate3d(0px,0,0); -o-transition-timing-function:ease; -o-transform:translate(0px,0px); -ms-transition-property:-ms-transform, left, top; -ms-transition-duration:0s; -ms-transform:translate3d(0px,0,0); -ms-transition-timing-function:ease;*/ transition-property:transform, left, top; transition-duration:0s; transform:translate3d(0px,0,0); transition-timing-function:ease; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { float: left; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /*******************************************************************************/ #menu{width:100%; overflow:hidden;} #menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;} #menu #nav li {float:left;width:50%;} #menu #nav li a {font-size: 18px;display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center; color:#333;} #menu_con{ width:100%; height:100%; border-top:none} .tag{overflow:hidden;} .selected{border-bottom: 1px solid #FF0303;color:#FF0303!important;} .list{ display: block; width:100%; height:50px; /*padding-top: 10px;*/ border-bottom: 1px solid #ddd; font-size: 14px; } .list_msg{ display: block; margin-top: 7px; } .list_img{ width:35px; height:35px; float:left; position: relative; top: 3px; } .list_msg span{ margin-left: 5px; display:block; float:left; color: #000; }
好像就这些了。
