效果如下：

说明：

这里我使用的原理是利用vue中的v-show/显示隐藏指令，当为true的时候显示，为false的时候隐藏

1html代码：

<head>

    <meta charset="UTF-8">

    <base target="_blank">

    <title>vue实现选项卡切换效果</title>

    <script src="js/jquery-1.8.2.min.js"></script>

    <script src="js/vue.js"></script>

</head>

<body>

<div id="app">

    <!--主体内容-->

    <div class="center">

        <!--Tap选项卡部分-->

        <div class="center-left-tap">

            <a href="javascript:void (0)" style="color: #1c1c1c;" class="current" @click="mt1">最新</a>

            <a href="javascript:void (0)" class="a-hover" @click="mt2">B2C</a>

            <a href="javascript:void (0)" class="a-hover" @click="mt3">C2C</a>

            <a href="javascript:void (0)" class="a-hover" @click="mt4">传统零售</a>

            <a href="javascript:void (0)" class="a-hover" @click="mt5">其他</a>

        </div>

        <div class="container" id="container01">

            <!--第一个 最新-->

            <div v-for="val in xuan" v-show="a">

                <div class="con" style="">

                    <div class="center-left-body bg">

                        <div class="img-box1">

                            <img :src="val.img1" alt="" class="img-h b-img">

                        </div>

                        <p><a href="detail-1.html" class="center-left-body-a1">{{val.h1}}</a></p>

                        <p><a href="detail-1.html" class="center-left-body-a2">{{val.p1}}</a></p>

                        <p class="mb-p">{{val.math}}</p>

                        <img :src="val.img2" alt="" class="mb-img">

                        <p><a href="" class="tab-mt">{{val.a1}}</a><a href="" class="tab-mt">{{val.a2}}</a></p>

                    </div>

                </div>

            </div>

            <!--第二个 B2C-->

            <div class="con" v-show="b">

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181112_1542008037535.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181112_1541985913463.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>

                </div>

            </div>

            <!--第三个 C2C-->

            <div class="con" v-show="c">

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181112_1542010837701.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>

                </div>

            </div>

            <!--第四个 传统零售-->

            <div class="con" v-show="d">

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181113_1542076349985.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181113_1542075324144.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181112_1542027463929.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p>

                </div>

            </div>

            <!--第五个 其他-->

            <div class="con" v-show="e">

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181113_1542091666106.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181113_1542091506167.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181113_1542089470929.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181107_1541569944473.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>

                </div>

                <div class="center-left-body bg">

                    <div class="img-box1">

                        <img src="img-index/20181112_1542008037535.jpg" alt="" class="img-h b-img">

                    </div>

                    <p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p>

                    <p><a href="detail-1.html"

                          class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p>

                    <p class="mb-p">2018-11-10 16:32</p>

                    <img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img">

                    <p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p>

                </div>

            </div>

        </div>

    </div>

</div><!--vue 结束-->

</body>

2css代码：

<style>

    .center{width: 1160px;margin: 0 auto;}

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

    a:hover{color: #1a79ff;}

    /*tap选项卡*/

    .center-left-tap{height: 58px;}

    .center-left-tap a{font-size: 16px;color: #999;margin-right: 37px;padding-bottom: 19px;}

    .a-hover:hover{color: #595959;}

    /*图文重复内容*/

    .center-left-body{width: 820px;height: 127px;border-top:1px solid #ddd;margin-top: -15px;padding: 21px 0;margin-bottom: 20px;}

    .center-left-body img:nth-child(1){width: 190px;height: 127px;float: left;}

    .center-left-body-a1{float: left;margin-left: 20px;font-size: 18px;line-height: 26px;color: #333;margin-top: -175px;}

    .center-left-body-a2{float: left;margin-left: 210px;font-size: 16px;color: #595959;margin-top: -95px;word-wrap:break-word;}

    .mb-p{float: left;margin-top: -20px;margin-left: 210px;color:#999;}

    .mb-img{float: left;margin-top: -20px;margin-left: 15px;}

    .tab-mt{margin-right: -30px;margin-left: 50px;margin-top: -20px;float: left;}

    .bor-no{border: none;}

    .bg:hover{background-color:#efefef;}

</style>

3js：

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            xuan: [],

            a: true,

            b: false,

            c: false,

            d: false,

            e: false,

        },

        mounted: function () {

            this.getData()

        },

        methods: {

            getData() {

                $.ajax({

                    type: 'get',

                    url: 'frame-1.json',

                    detaType: 'JSON',

                    success: function (data) {

                        vm.xuan = data.xuan

                    }

                })

            },

            //    选项卡

            mt1: function () {

                this.a = true

                this.b = false

                this.c = false

                this.d = false

                this.e = false

            },

            mt2: function () {

                this.a = false

                this.b = true

                this.c = false

                this.d = false

                this.e = false

            },

            mt3: function () {

                this.a = false

                this.b = false

                this.c = true

                this.d = false

                this.e = false

            },

            mt4: function () {

                this.a = false

                this.b = false

                this.c = false

                this.d = true

                this.e = false

            },

            mt5: function () {

                this.a = false

                this.b = false

                this.c = false

                this.d = false

                this.e = true

            }

        }

    });

</script>

应届菜鸟，大佬勿喷...

vue实现选项卡切换效果的更多相关文章

  1. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  2. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  3. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  4. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  5. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  6. JS实现选项卡切换效果

    1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...

  7. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  8. vue实现选项卡切换--不用ui库

    vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui中的标签页, ...

  9. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

随机推荐

  1. 【CF906E】Reverses（回文自动机，最小回文分割）

    题意:给定两个长度相等的仅由小写字母组成的串A和B,问在A中最少选择多少段互不相交的子串进行翻转能使A和B相同 len<=5e5 思路:构造新串S=a[1]b[1]a[2]b[2]...a[n] ...

  2. 【BZOJ2946&SPOJ1812】公共串（后缀自动机）

    题意:给出几个由小写字母构成的单词,求它们最长的公共子串的长度. 单词的数量<=5,单词的长度至少为1,最大为2000. 思路: #include<bits/stdc++.h> us ...

  3. BZOJ 3294: [Cqoi2011]放棋子(计数dp)

    传送门 解题思路 设\(f[i][j][k]\)表示前\(k\)个颜色的棋子占领了\(i\)行\(j\)列的方案数,那么转移时可以枚举上一个颜色时占领的位置,\(f[i][j][k]=\sum\lim ...

  4. SQL语言分类DDL、DML、DQL、TCL、DCL

    关系型数据库的SQL语句都可以分为4大类: 1. DDL(数据定义语言)     DDL 主要是指如下的四种SQL 语句,以 CREATE.DROP.ALRET开头和 TRUNCATE TABLE 语 ...

  5. Visual Studio Code-调试Node.js代码

    打开js文件 F0下断点 F5调试 PS:配置了launch.json会默认执行调试配置的js

  6. 编译-构建Shell语法的语法树（parse tree）

    翻译自:Generating a parse tree from a shell grammar - DEV Community

  7. jmeter添加自定义扩展函数之图片base64

    原文连接:---------https://www.cnblogs.com/qiaoyeye/p/7218770.html----------- 打开eclipse,新建maven工程,在pom中引用 ...

  8. CSS最基础的语法和三种引入方式

    **CSS语法** CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.选择器通常是您需要改变样式的 HTML 元素. selector {declaration1; declaration ...

  9. js判断客户端是pc还是移动端

    navigator.userAgentNavigator 对象包含有关浏览器的信息.没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象.userAgent 属性是一个只读的字符 ...

  10. 2019杭电多校第⑨场B Rikka with Cake (主席树，离散化)

    题意: 给定一块n*m的矩形区域,在区域内有若干点,每个顶点发出一条射线,有上下左右四个方向,问矩形被分成了几个区域? 思路: 稍加观察和枚举可以发现,区域数量=射线交点数+1(可以用欧拉定理验证,但 ...