效果如下:

说明:

这里我使用的原理是利用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. webpack使用问题记录

    1.版本问题 webpack的安装并不是越新越好.当使用最新版本时不使用配置文件,直接编译不生成文件甚至报错:使用3.12版本时编译文件可以成功但是不生成新文件:使用 3.5.3 版本时成功且生成新文 ...

  2. CSD编码----数字信号处理--006

    有符号数(Signed Digit Number , SD) SD编码 1.有三重值 {0,1,-1} 2.应用在不用进位的加法器或乘法器中能够降低复杂性 因为通常可以通过非零元素的数来估计乘法的工作 ...

  3. 《Spring Cloud构建微服务架构》系列博文示例

    SpringCloud-Learning   源码下载地址:http://download.csdn.net/detail/k21325/9650968     本项目内容为Spring Cloud教 ...

  4. Navicat for Mysql 连接报错1251[已解决]

    因为mysql是8.0.11的版本,比较新的mysql采用新的保密方式所以旧的修改密码的方式似乎不能用, 新版本改密码方式: use mysql; ALTER USER 'root'@'localho ...

  5. inputAccessoryView,inputView

    我们在使用UITextView和UITextField的时候,可以通过它们的inputAccessoryView属性给输入时呼出的键盘加一个附属视图,通常是UIToolBar,用于回收键盘. 但是当我 ...

  6. 数据挖掘之DecisionTreeClassifier决策树

    用决策树DecisionTreeClassifier的数据挖掘算法来通过三个参数,Pclass,Sex,Age,三个参数来求取乘客的获救率. 分为三大步: 一,创建决策树DecisionTreeCla ...

  7. zabbix真的很简单 (安装篇)

    系统环境: Centos 6.4 一直觉得 zabbix 很简单,但是还是有好多人看了好多文档都搞不明白怎么用,我从2013年使用到现在也小有心得,如果时间允许,很高兴与大家一起分享我在使用过程中的一 ...

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

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

  9. fiddler接口知识

    1. 访问接口时经常会出现乱码的情况,需要fiddler解码操作 2.域名过滤

  10. 北京邀请赛 B. Beautiful Garden

    题意:给你坐标和n个点,求最少移动的点使得n个点成等差数列 思路:既然要成等差数列,那么最起码有两个点是不动的,然后枚举这两个点中间的点的个数,近期水的要死,看了队友的代码做的 #include &l ...