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

最新推荐文章于 2020-01-03 11:28:13 发布

weixin_30695195

最新推荐文章于 2020-01-03 11:28:13 发布

阅读量428

点赞数

原文链接：http://www.cnblogs.com/xiuber/p/5826682.html

版权

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

好像就这些了。

转载于:https://www.cnblogs.com/xiuber/p/5826682.html

weixin_30695195

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手机端的tab切换，响应式切换效果

之前写过这些tab切换的效果，无论网页上还是手机端，网上也有很多的例子，这个好像是我参考网上，也不知道是哪里的了。总结了一下，就当保存下来了把。<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&...
复制链接

扫一扫