整理分享：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Swiper demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">

    <style>

        *{margin:0;padding:0}

        body,html{ max-width: 640px; margin: 0 auto; background-color: #ebebeb;}

        a{ text-decoration: none; color: #333 }

        li{list-style:none}

        .swiper_tab{ overflow: hidden; font-size: 18px; font-weight: 700; background-color: #fff; height: 40px; line-height: 40px; overflow: hidden; text-align: center;}

        .swiper_ul_wrap{width: 86%; float: left;}

        .swiper_ul{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}

        .swiper_ul li{display:flex;display:-webkit-flex;cursor:pointer;flex:1;flex-direction:row;justify-content:center;align-items:center; position: relative; padding:0 10px;}

        .swiper_ul li:after{ content: ""; position: absolute; right: 1px; height:17px; width: 1px; background-color: #ebebeb  }

        .swiper_ul li.active span{position: relative; color: #e82e2e; }

        .swiper_ul li.active span:before{ content: ""; position: absolute; left:0; bottom:0; width: 100%; height: 3px; background-color: #e82e2e }

        .swiper_ul_last{width: 14%; float: left;}

        .swiper-slide{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}

        .swiper-slide{height:1px} /* 随意指定一个height值即可 */

        .swiper-slide-active { height:auto}

  </style>

</head>

<body>

    <div class="swiper_tab_wrap" id="swiperTabWrap">

        <div class="swiper_tab">

            <div class="swiper_ul_wrap">

                <ul class="swiper_ul">

                    <li class="active"><span>推荐</span></li>

                    <li><span>生肖</span></li>

                    <li><span>看相</span></li>

                    <li><span>风水</span></li>

                    <li><span>取名</span></li>

                    <li><span>八字</span></li>

                </ul>

            </div>

            <a href="https://cs.fuyuandian.com" class="swiper_ul_last"><span>商城</span></a>

        </div>

        <div class="swiper-container" id="swiperTabCon">

            <div class="swiper-wrapper">

                <div class="swiper-slide">内容1</div>

                <div class="swiper-slide">内容2</div>

                <div class="swiper-slide">内容3</div>

                <div class="swiper-slide">内容14</div>

                <div class="swiper-slide">内容15</div>

                <div class="swiper-slide">内容16</div>

            </div>

        </div>

    </div>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>

    <script type="text/javascript">

    var swiper = new Swiper('#swiperTabCon', {

        speed: 500,

        on: {

            slideChangeTransitionStart: function() { //swiper从当前slide开始过渡到另一个slide时执行

                var index = swiper.activeIndex;

                $('#swiperTabWrap ul li').removeClass('active').eq(index).addClass('active');

            }

        }

    });

    $('#swiperTabWrap ul li').on('click', function(e) {

        e.preventDefault();

        //得到当前索引

        var i = $(this).index();

        $('#swiperTabWrap ul li').removeClass('active').eq(i).addClass('active');

        swiper.slideTo(i, 1000, false);

    });

    </script>

</body>

</html>

效果如图：

参考swiper一些涉及的属性：

https://www.swiper.com.cn/api/event/91.html

https://www.swiper.com.cn/api/methods/109.html

swiper选项卡还可以左右滑动，最后一个直接跳转链接的更多相关文章

  1. TabTopAutoLayout【自定义顶部选项卡区域（带下划线）（动态选项卡数据且可滑动）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现带下划线且可滑动效果.[实际情况中建议使用RecyclerView] 备注:如果 ...

  2. TabTopAutoTextSizeLayout【自定义文字字号区域（动态选项卡数据且可滑动）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现可滑动效果.[实际情况中建议使用RecyclerView] 对<TabTo ...

  3. Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡

     <Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡> 之前基于github上的第三方开源控件ViewPagerIndicator的UnderlinePa ...

  4. 笨重的mfc还在基于系统控件，熟练的mfc工程师还比不过学习Qt一个月的学生开发效率高（比较精彩，韦易笑）

    作者:韦易笑链接:https://www.zhihu.com/question/29636221/answer/45102191来源:知乎著作权归作者所有,转载请联系作者获得授权. 更新:擦,本来只有 ...

  5. 利用WCF的双工通讯实现一个简单的心跳监控系统 z

    利用WCF的双工通讯实现一个简单的心跳监控系统 http://www.cnblogs.com/zuowj/p/5761011.html 何为心跳监控系统? 故名思义,就是监控某个或某些个程序的运行状态 ...

  6. 笔记——malloc、free、不同数据类型操作、.pyc文件、python安装第三方包、验证一个网站的所有链接有效性

    C — malloc( ) and free( ) C 语言中使用malloc( )函数申请的内存空间,为什么一定要使用free释放? **malloc()函数功能:是从堆区申请一段连续的空间,函数结 ...

  7. Struts2 从一个Action跳至另一个Action

    Struts2  从一个Action跳至另一个Action 一.注解的 @Result(name=SUCCESS,type="chain", params={"actio ...

  8. 【原创】Android 从一个Activity跳转到另外一个Activity

    Android四大组件activity使用,实现两个activity之间的跳转 基本流程:创建两个activity-将其中一个activity中组件作为事件源-通过组件事件的处理借助intent对象实 ...

  9. 分享一个在线生成微信跳转链接实现微信内跳转浏览器打开URL的工具

    前言 现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面 ...

随机推荐

  1. [Python] CondaHTTPError: HTTP 000 CONNECTION FAILED for url

    CondaHTTPError: HTTP 000 CONNECTION FAILED for url 遇到这个问题 解决方法如下两个 一.C:\Users\Administrator 目录下 编辑 . ...

  2. Git - git bash 在 windows 下创建软连接

    1. 概述 使用 git bash 在 windows 下创建软连接 或者叫 快捷方式 感谢 Tony 老师的帮助 Tony 的技术笔记 Windows 使用 ln -s 创建软链接 2. 问题 需求 ...

  3. 【PAT甲级】1102 Invert a Binary Tree (25 分)（层次遍历和中序遍历）

    题意: 输入一个正整数N(<=10),接着输入0~N-1每个结点的左右儿子结点,输出这颗二叉树的反转的层次遍历和中序遍历. AAAAAccepted code: #define HAVE_STR ...

  4. Go流程结构（if）

    一.程序的流程结构 程序的流程控制结构一共有三种:顺序结构,选择结构,循环结构. 顺序结构:从上向下,逐行执行. 选择结构:条件满足,某些代码才会执行.0-1次 分支语句:if,switch,sele ...

  5. sublime-text3 安装 emmet 插件

    下载sublime,http://www.sublimetext.com/ 安装package control :https://packagecontrol.io/ins... 这个地址需要翻墙,访 ...

  6. 手机CPU那些事

    原文:https://zhuanlan.zhihu.com/p/19923974 如今人们买手机,都比较关心采用了什么 CPU,因为 CPU 直接决定了这台手机的性能,CPU 之于手机 就好比人的大脑 ...

  7. 喵星之旅-狂奔的兔子-myeclipse搭建ssm

    . 可以使用试用期限内的myeclipse,也可以找到有授权的机器进行操作.搭建好的项目框架可以直接移植到免费软件eclipse使用.或者直接购买myeclipse授权. 一.创建一个java web ...

  8. STM32CUBEMX使用操作记录

    1.New Project 2.选择芯片型号 3.配置相关外设 4.例如选择了GPIO_Output 5.配置时钟树 灰色框点不了,这和你上一步相关外设配置有关,鼠标靠近灰色框,系统会给出提示 6.工 ...

  9. EditPlus 注册码在线生成

    虽然editplus现在不常用,但是它轻便,我还是很喜欢的,推荐一个注册码生成器,真是好好用 http://www.jb51.net/tools/editplus/ 点击链接输入自己想要的用户名,就能 ...

  10. 看 C++ Primer 的58页， 讲拷贝时不能忽略 底层const这里的说的原因有点牵强， 这里给出自己的理解

    extern const  int ci =42; const int * p2  = &ci; extern const  int *const p3= p2; int *p= p3;   ...