之前写过这些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. js获取时间搓
			
    var oData=new Date().getTime(2016-01-16); console.log(oData);
    
			
    2. 
						
  2. SQL 脚本
			
    1.USE语句 USE语句用于设置当前数据库,如果没有USE语句,那么就由执行脚本的任何用户来确定执行脚本时当前数据库是正确的.如果只是一个通用脚本,那么省去USE语句实际上可能更有益.通常,如果在脚 ...
    
			
    3. 
						
  3. Make the “Check out” function available in the office document opened with Document ID link
			
    I found a solution to make the “Check out” function available in the office document opened with Doc ...
    
			
    4. 
						
  4. Codeforces Round #368 (Div. 2) C. Pythagorean Triples（数学）
			
    Pythagorean Triples 题目链接: http://codeforces.com/contest/707/problem/C Description Katya studies in a ...
    
			
    5. 
						
  5. JPA多对多@manytomany注解配置实例
			
    维护端注解 @ManyToMany (cascade = CascadeType.REFRESH) @JoinTable (//关联表 name = "student_teacher&quo ...
    
			
    6. 
						
  6. C语言中字符数组和字符串指针分析
			
    这几天搞Unix上的C程序,里面用到了很多字符数组和字符串指针,我记得在学完C语言后相当一段时间里,对指针这个东西还是模模糊糊,后来工作也没怎么 用到过C,虽然网上这类的文章也有很多,还是决定自己在这 ...
    
			
    7. 
						
  7. ASP.NET MVC- KindEditor的使用
			
    我用过几个EDITOR,还是比较喜欢KINDEDITOR.这个工作可能最近要用到了,周末在家花时间了解了一下.做了一下备注在这里,以备日后方便查阅. 1.首先去KINDEDITOR的官网下载最新的版本 ...
    
			
    8. 
						
  8. chart.js接口开发：X轴步长和Labels旋转角
			
    一. 当初为什么选择chart.js 当初项目使用库是Zepto,Zepto能支持的chart处理库太少.也是为了使得项目比较轻量化,所以选择了chart.js. 但是最后的显示结果实在太差,放弃了c ...
    
			
    9. 
						
  9. 关于request.getsession(true|false)
			
    request.getSession(true):若存在会话则返回该会话,否则新建一个会话.request.getSession(false):若存在会话则返回该会话,否则返回NULL
    
			
    10. 
						
  10. Netsh配置端口
			
    开启防火墙端口 netsh firewall set portopening all 3389 RDP_Rule enable (TCP/UDP) #配置RPC高位端口段Netsh int ipv4  ...
    
			
    11.