手机端的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:;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切换，响应式切换效果的更多相关文章

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

随机推荐

poj 3299 Humidex
直接套公式就可以,可我套公式第一遍都错了,英语差的孩子伤不起(┬＿┬) #include <iostream> #include <cmath> #include <io ...
C#完整的通信代码（点对点，点对多，同步，异步，UDP，TCP)
C# code namespace UDPServer { class Program { static void Main(string[] args) { int recv; byte[] dat ...
Configure a welcome page in Struts
Every website need a welcome or default page as an entry point. Here's 3 ways to configure a welcome ...
Samsung Galaxy S II GT-I9100 指令全集部分指令请慎用
英文版谷歌翻译 Obtain/Change Device Information *#06# (Display IMEI number) *#1234# (Display current firmw ...
在WindowsServer2008服务器上安装SQLServer2008R2
登录服务器使用远程桌面登录Windows Server 2008 安装前的准备工作下载SQL Server安装程序下载Microsoft SQL Server2008 R2 RTM - Ex ...
javascript数据缓存
if(!self.hotCityPrice[city]) { $.ajax({ type: 'GET', url: self.hotCityUrl, data: {cityCode: city, t: ...
（剑指Offer）面试题27：二叉搜索树与双向链表
题目: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二叉树的定义如下: struct TreeNode{ int val; Tr ...
Oracle数据库定时任务配置和日志执行情况查询
基础配置: /***************************************************************** * * 移动抵扣券快到期推送提醒 * 首次执行 : 2 ...
为什么要把js代码写到中
是为了兼容,不支持js的浏览器会把其中的内容当做html注释.
PostgreSQL中的AnyEnum例子
建立函数: CREATE OR REPLACE FUNCTION enumtest(anyenum) RETURNS text AS $$ ::text; $$ LANGUAGE SQL; 建立enu ...

手机端的tab切换，响应式切换效果

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

随机推荐

热门专题