之前写过这些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:;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:;}
.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:;}
.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:;margin:;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;
}
好像就这些了。