之前写过这些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;

}
好像就这些了。


												


											
手机端的tab切换，响应式切换效果的更多相关文章
	

    
								
  1. PHP项目实现手机端和PC端的页面切换
		
    目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...
    
		
    2. 
						
  2. 手摸手带你理解Vue响应式原理
		
    前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它 ...
    
		
    3. 
						
  3. css实现响应式九宫格效果
		
    1. 首先看下九宫格的效果图: 2. html代码比较简单,如下: <div class="main"> <div class="box1"& ...
    
		
    4. 
						
  4. 12款响应式 Lightbox（灯箱）效果插件
		
    灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果.网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也 ...
    
		
    5. 
						
  5. 响应式布局rem的使用
		
    在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算! 1.rem的兼容性: 如下图所示IE9以上就支持了rem这个属 ...
    
		
    6. 
						
  6. 关于bootstrap和响应式布局
		
    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
    
		
    7. 
						
  7. Java9第四篇-Reactive Stream API响应式编程
		
    我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9  ...
    
		
    8. 
						
  8. 《微信小程序七日谈》- 第二天：你可能要抛弃原来的响应式开发思维
		
    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...
    
		
    9. 
						
  9. 用rem来做响应式开发
		
    强烈推荐这篇文章:<web app 变革之rem> px转rem工具:<px转rem工具> 由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. pku3659 Cell Phone Network
			
    http://poj.org/problem?id=3659 树状DP,树的最小点覆盖 #include <stdio.h> #include <vector> #define ...
    
			
    2. 
						
  2. 转】MyEclipse使用总结——MyEclipse中配置WebLogic12c服务器
			
    原博文出自于:http://www.cnblogs.com/xdp-gacl/p/4142495.html 感谢! MyEclipse中配置WebLogic12c服务器的步骤如下: [Window]→ ...
    
			
    3. 
						
  3. 【128】Word中的VBA
			
    通过查找关键字,然后删除整段文字的实现! Sub 删除查找含关键词的行() Dim KeyWord As String KeyWord = InputBox("请输入关键词(词长不限,中英均 ...
    
			
    4. 
						
  4. utf8 和 UTF-8 的区别
			
    只有在MySQL中可以使用“utf-8”的别名“utf8”,但是在其他地方一律使用大写“UTF-8”.
    
			
    5. 
						
  5. How Tomcat Works（二）
			
    我们这些可怜虫,只有沿着大神的思路,这样我们才能进步得更快:因为我们不是跟大神处于同一级别上.所以我这里是参考<How Tomcat Works>这本英文版的大作来理解tomcat的工作原 ...
    
			
    6. 
						
  6. Java调用Telnet示例
			
    import java.io.IOException; import java.io.InputStream; import java.io.PrintStream; import java.io.U ...
    
			
    7. 
						
  7. OC：NSmuber、NSString 的互转
			
    NSmuber 转化为 IOS 中的 NSString 假设现有一NSNumber的变量A,要转换成NSString类型的B 方法如下: NSNumberFormatter* numberFormat ...
    
			
    8. 
						
  8. (C#)使用队列(Queue)解决简单的并发问题
			
    (C#)使用队列(Queue)解决简单的并发问题 2015-07-16 13:04 13265人阅读 评论(8) 收藏 举报  分类: Asp.Net(8)  版权声明:本文为博主原创文章,未经博主允 ...
    
			
    9. 
						
  9. 32.怎样在Swift中实现TabBar和导航视图结合的项目？
			
    导航栏和TabBar结合的项目,在我们平常开发中会经常看到,下面我们通过自定义的TabBar来实现一个导航和TabBar结合的Demo. 1.自定义TabBar import UIKit class  ...
    
			
    10. 
						
  10. IAR EWARM PRINTF/SCANF FORMATTER
			
    The linker automatically chooses an appropriate formatter for printf- and scanf-related function bas ...
    
			
    11.