在项目中遇到的，要实现tab切换，我用的是swiper.js

官网：http://www.swiper.com.cn/api/start/new.html

  1.  <!DOCTYPE html>
  2.  <html lang="zh">
  3.  <head>
  4.    <meta charset="UTF-8">
  5.    <meta http-equiv="x-ua-compatible" content="ie=edge">
  6.    <title>首页</title>
  7.    <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">
  8.    <link type="text/css" rel="stylesheet" href="./css/swiper.css">
  9.    <style>
  10.      html,body{
  11.        width: .5rem;
  12.        padding: ;
  13.        margin: ;
  14.        height: %;
  15.      }
  16.      ul,p{
  17.        margin: ;
  18.        padding: ;
  19.      }
  20.      a{
  21.        text-decoration: none;
  22.      }
  23.      .index_container{
  24.        position: relative;
  25.        width: %;
  26.        height: %;
  27.        top: ;
  28.        left: ;
  29.      }
  30.      .index_content{
  31.        width: %;
  32.        min-height: %;
  33.      }
  34.      .index_con{
  35.        position: relative;
  36.        padding-bottom: .8rem;
  37.      }
  38.      .advertisement{
  39.        height: .21rem;
  40.        border-bottom: 1px solid #d4cdc4;
  41.      }
  42.      #crec_index_jd,#crec_jd,#crec_jd li{
  43.        width: auto !important;
  44.        height: .21rem !important;
  45.      }
  46.      .crecweb_advertisement img{
  47.        width: auto;
  48.        height: .21rem;
  49.      }
  50.      .search{
  51.        position: absolute;
  52.        top: .2rem;
  53.        width: .9rem;
  54.        height: .56rem;
  55.        margin:  .3rem;
  56.        z-index: ;
  57.      }
  58.      .search_input{
  59.        width: .94rem;
  60.        padding:  .76rem  .2rem;
  61.        height: .56rem;
  62.        border-radius: 8px;
  63.        border: none;
  64.        float: left;
  65.        font-size: .26rem;
  66.        color: #;
  67.        z-index: ;
  68.      }
  69.      input::-webkit-input-placeholder{
  70.        /* WebKit browsers */
  71.        color: #;
  72.      }
  73.      input:-moz-placeholder{
  74.        /* Mozilla Firefox 4 to 18 */
  75.        color: #;
  76.      }
  77.      input::-moz-placeholder{
  78.        /* Mozilla Firefox 19+ */
  79.        color: #;
  80.      }
  81.      input:-ms-input-placeholder{
  82.        /* Internet Explorer 10+ */
  83.        color: #;
  84.      }
  85.      .crecweb_search_i{
  86.        display: block;
  87.        width: .28rem;
  88.        height: .28rem;
  89.        background: url("http://static.crecgec.com/crecgecweb/search.png") % %  no-repeat;
  90.        background-size: .28rem .28rem;
  91.        position: absolute;
  92.        z-index: ;
  93.        left: .14rem;
  94.        padding: .14rem;
  95.      }
  96.  
  97.      .crecweb_notice{
  98.        height: .26rem;
  99.        line-height: .26rem;
  100.        margin: .2rem .3rem;
  101.        overflow: hidden;
  102.      }
  103.      .crecweb_notice_img{
  104.        width: .31rem;
  105.        height: .26rem;
  106.        background: url('http://static.crecgec.com/crecgecweb/notice.png') no-repeat;
  107.        background-size: .31rem .26rem;
  108.        float: left;
  109.      }
  110.      .crecweb_notice li {
  111.        font-size: .22rem;
  112.        position: relative;
  113.        list-style: none;
  114.      }
  115.      .crecweb_notice li a{
  116.        height: .26rem;
  117.        color: #2d2d2d;
  118.      }
  119.      .crecweb_notice li a span{
  120.        width: .9rem;
  121.        overflow: hidden;
  122.        white-space: nowrap;
  123.        text-overflow: ellipsis;
  124.        margin-left: .2rem;
  125.      }
  126.      .crecweb_notice li a em{
  127.        /*position: absolute;*/
  128.        /*right: 0;*/
  129.        font-style: normal;
  130.      }
  131.  
  132.      .crecweb_tendering,.crecweb_winTheBid,.crecweb_qualifiedSupply{
  133.        margin: .3rem;
  134.      }
  135.      .tendering-table,.title{
  136.        height: .43rem;
  137.        line-height: .43rem;
  138.        border-bottom: 1px solid #d01e00;
  139.      }
  140.      .tendering-table ul{
  141.        height: .43rem;
  142.        float: left;
  143.      }
  144.      .tendering-table ul li{
  145.        height: .43rem;
  146.        list-style: none;
  147.        float: left;
  148.        font-size: .26rem;
  149.        padding: .1rem;
  150.        margin-right: .1rem;
  151.        color: #;
  152.        background-color: #fff;
  153.        border-top-left-radius: 4px;
  154.        border-top-right-radius: 4px;
  155.      }
  156.      .title_show{
  157.        height: .43rem;
  158.        list-style: none;
  159.        float: left;
  160.        font-size: .26rem;
  161.        padding: .1rem;
  162.        color: #fff !important;
  163.        background-color: #d01e00 !important;
  164.        border-top-left-radius: 4px;
  165.        border-top-right-radius: 4px;
  166.      }
  167.      .crecweb_more{
  168.        font-size: .2rem;
  169.        color: #;
  170.        float: right;
  171.      }
  172.      .crecweb_active{
  173.        color: #fff !important;
  174.        background-color: #d01e00 !important;
  175.      }
  176.  
  177.      .swiper-slide ul li,.crecweb_content ul li,.crecweb_content_gys ul li{
  178.        overflow: hidden;
  179.        list-style: none;
  180.        color: #2d2d2d;
  181.        margin-top: .3rem;
  182.        position: relative;
  183.        list-style-image: none;
  184.        background-image: url( "http://static.crecgec.com/crecgecweb/yuandian.png" );
  185.        background-repeat: no-repeat;
  186.        background-position: 2px .1rem;
  187.        padding-left: 15px;
  188.      }
  189.      .swiper-slide ul li a,.crecweb_content ul li a,.crecweb_content_gys ul li a{
  190.        color: #2d2d2d;
  191.        font-size: .22rem;
  192.        float: left;
  193.      }
  194.      .swiper-slide ul li:first-child,.crecweb_content ul li:first-child,.crecweb_content_gys ul li:first-child{
  195.        margin-top: .2rem;
  196.      }
  197.      .swiper-slide ul li span,.crecweb_content ul li span{
  198.        display: block;
  199.        height: auto;
  200.        /*max-height: 0.6rem;*/
  201.        font-size: .22rem;
  202.        overflow: hidden;
  203.      }
  204.      .crecweb_content_gys ul li span{
  205.        width: .8rem;
  206.        overflow: hidden;
  207.        white-space: nowrap;
  208.        text-overflow: ellipsis;
  209.        float: left;
  210.      }
  211.      .crecweb_content_gys ul li em{
  212.        position: absolute;
  213.        right: ;
  214.        font-style: normal;
  215.      }
  216.      .swiper-slide ul li em,.crecweb_content ul li em{
  217.        font-size: .18rem;
  218.        position: absolute;
  219.        right: ;
  220.        bottom: ;
  221.        font-style: normal;
  222.      }
  223.  
  224.      .crecweb_footer{
  225.        display: flex;
  226.        width: %;
  227.        background-color: #e5e5e5;
  228.        position: relative;
  229.        clear: both;
  230.        margin-top: -.8rem;
  231.      }
  232.      .footer_con_line{
  233.        flex: ;
  234.        position: relative;
  235.        border-bottom: 1px solid #c6c6c6;
  236.        top: -.38rem;
  237.      }
  238.      .footer_con_text{
  239.        padding:  .17rem;
  240.        font-size: .2rem;
  241.        height: .2rem;
  242.        line-height: .2rem;
  243.        color: #a9a7a7;
  244.        margin: .3rem ;
  245.      }
  246.  
  247.      .crecweb_publicDiv{
  248.        width: %;
  249.        height: .2rem;
  250.        background-color: #e5e5e5;
  251.      }
  252.  
  253.      .crecgecweb_loading{
  254.        position:fixed;
  255.        width: %;
  256.        height: %;
  257.        z-index:;
  258.        background-color: rgba(,,,);
  259.      }
  260.      .crecgecweb_loading img{
  261.        position: absolute; left: %; top: %;
  262.        transform: translate(-%, -%);
  263.      }
  264.    </style>
  265.  </head>
  266.  <body>
  267.  <script>
  268.    setSize()
  269.  
  270.    window.addEventListener('resize', () => {
  271.      setSize()
  272.    }, false)
  273.  
  274.    function setSize() {
  275.      //       设置字体
  276.      var deviceWidth = document.documentElement.clientWidth;
  277.      if (deviceWidth < ) {
  278.        deviceWidth =
  279.      }
  280.      if(deviceWidth > ) {
  281.        deviceWidth =
  282.      }
  283.      document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
  284.    }
  285.  </script>
  286.  
  287.  <div class="index_container">
  288.    <div class="index_content">
  289.        <!--招标公告、竞争性谈判、竞价采购、询价书 start-->
  290.        <div class="crecweb_tendering" >
  291.          <div class="tendering-table">
  292.            <ul>
  293.              <li class="crecweb_active">招标公告</li>
  294.              <li>竞争性谈判</li>
  295.              <li>竞价采购</li>
  296.              <li>询价书</li>
  297.            </ul>
  298.            <!--<a class="crecweb_more">更多></a>-->
  299.          </div>
  300.          <div class="swiper-container">
  301.            <div class="swiper-wrapper">
  302.              <div class="swiper-slide crecweb_content_sub">
  303.                <ul>
  304.                  <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=8"></script>
  305.                </ul>
  306.              </div>
  307.              <div class="swiper-slide crecweb_content_sub">
  308.                <ul>
  309.                  <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=9"></script>
  310.                </ul>
  311.              </div>
  312.              <div class="swiper-slide crecweb_content_sub">
  313.                <ul>
  314.                  <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=56"></script>
  315.                </ul>
  316.              </div>
  317.              <div class="swiper-slide crecweb_content_sub">
  318.                <ul>
  319.                  <script type="text/javascript" src="http://www.crecgec.com/api.php?mod=js&bid=55"></script>
  320.                </ul>
  321.              </div>
  322.            </div>
  323.          </div>
  324.        </div>
  325.        <!--招标公告、竞争性谈判、竞价采购、询价书 end-->
  326.    </div>
  327.  </div>
  328.  <script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
  329.  <script type="text/javascript" src="./js/swiper.js"></script>
  330.  <script>
  331.    window.onload = function () {
  332.      //       table切换
  333.      var mySwiper = new Swiper('.swiper-container')
  334.      $('.tendering-table ul li').on('click', function (e) {
  335.        e.preventDefault();
  336.        //得到当前索引
  337.        var i = $(this).index();
  338.        $('.tendering-table ul li').removeClass('crecweb_active').eq(i).addClass('crecweb_active');
  339.        mySwiper.slideTo(i, , false);
  340.      });
            //这块是调用 slideChange方法，当内容左右移动的时候，tab页也相应切换
  341.      mySwiper.on('slideChange', function () {
  342.        $('.tendering-table ul li').removeClass('crecweb_active').eq(this.activeIndex).addClass('crecweb_active');
  343.      })
  344.  
  345.      var maxWidth =
  346.      $(".crecweb_content_sub ul li").each(function () {
  347.  
  348.        if($(this).find('span').text().trim().length > maxWidth) {
  349.          $(this).find('span').text($(this).find('span').text().trim().substring(, maxWidth))
  350.          $(this).find('span').text( $(this).find('span').text() + '...')
  351.        }
  352.        if($(this).find('span').text().trim().length > ) {
  353.          $(this).find('span').css({'height':'0.72rem'})
  354.        }
  355.      })
  356.  
  357.    }
  358.  
  359.  </script>
  360.  </body>
  361.  </html>
  1. slideChange

使用swiper.js实现移动端tab切换的更多相关文章

  1. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

  2. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  3. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. js中常用的Tab切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 移动端tab切换时下划线的滑动效果

    1.当前 tab 出现下划线的同时,前一个下划线同时消失(出现方向与消失方向保持一致),伴随过渡效果. <!DOCTYPE html><html lang="en" ...

  6. 小程序的tab切换事件

    index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...

  7. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  8. html+js(swiper.js)+css左右滑动切换页面效果，适配移动端

    demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...

  9. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

随机推荐

  1. 洛谷 P3951 小凯的疑惑(数学)

    传送门:Problem P3951 https://www.cnblogs.com/violet-acmer/p/9827010.html 参考资料: [1]:http://m.blog.sina.c ...

  2. CentOS下的yum upgrade和yum update区别

    说明:生产环境对软件版本和内核版本要求非常精确,别没事有事随便的进行yum update操作!! ! yum update:升级所有包同时也升级软件和系统内核 yum upgrade:只升级所有包,不 ...

  3. 4、Python-列表

    列表格式 # 元素可以是不同类型的 namesList = [1, 'xiaoZhang', 'xiaoHua'] print(namesList[0]) print(namesList[1]) pr ...

  4. 设计模式---对象创建模式之原型模式（prototype）

    一:概念 原型模式(Prototype Pattern) 实际上就是动态抽取当前对象运行时的状态 Prototype模式是一种对象创建型模式,它采取复制原型对象的方法来创建对象的实例.使用Protot ...

  5. 把svn上的mycelipse导到本地的eclipse中【原】

    myeclipse和eclipse的web项目互导时会产生各种问题,现在把我遇到的情况记录如下: eclipse如何把svn上down下来的myeclipseWeb项目变成eclipse的Web项目: ...

  6. 简易selenium自动化测试框架(Python)

    最近空闲时间在探索Selenium的自动化测试,简单的写了一个小框架来测试公司的一个web产品.该框架包括以下模块: 1. Test case编写模式(page模式,参考之前的博文http://www ...

  7. Javaweb中提到的反射浅析（附源码）

    反射:一个jdk5.0的新特性,高级运用.在后期的框架中,这个是一大重点,现在估计我们都不会太多的接触他的.但是为了后面的铺垫,我想还是先了解一下: 先构造一个类,然后我们用反射来获取,调用里面的方法 ...

  8. UpnP Hacking

    1.概述 通用即插即用(UpnP)是一种用于PC机和智能设备的常见对等网络连接的体系结构. UPnP以Internet标准和技术(例如Tcp/IP.HTTP和XML)为基础,使这样的设备彼此可自动连接 ...

  9. Python之Eclipse环境下安装与配置

    奔着对python的好奇,今天又是周末,欲小试Python.那么首先避不开的问题就是python的环境搭建.而我之前已经在学习Java的过程中安装了Eclipse,不想再安装更多的IDE了,就那Ecl ...

  10. luogu P2303 [SDOi2012]Longge的问题

    传送门 \[\sum_{i=1}^{n}\gcd(i,n)\] 考虑枚举所有可能的gcd,可以发现这一定是\(n\)的约数,当\(\gcd(i,n)=x\)时,\(gcd(\frac{i}{x},\f ...