<!DOCTYPE html>

<html lang="cn-zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

         ul li {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        #app {

            width: 600px;

            height: 400px;

            margin: 0 auto;

            border: 1px solid #ccc;

        }

        .tab-tilte{

            width: 90%;

        }

        .tab-tilte li{

            float: left;

            width: 50%;

            height: 44px;

            line-height: 44px;

            text-align: center;

            background-color:#fff;

            cursor: pointer;

        }

        /* 点击对应的标题添加对应的背景颜色 */

        .tab-tilte .active{

            background:url('./a.png') no-repeat;

            /* 地址是背景图标 */

            color: #fff;

            background-size: 100% 44px;

        }

        .tab-tilte .active1{

            background: url('./b.png') no-repeat;

            /* 背景图标 */

            color: #fff;

            background-size: 100% 44px ;

        }

        .tab-content div{

            float: left;

            width: 25%;

            line-height: 100px;

            text-align: center;

        }

    </style>

</head>

<body>

        <div id="app">

            <ul class="tab-tilte">

                <li @click="cur=0" :class="{active:cur==0}">1.验证手机</li>

                <li @click="cur=1" :class="{active1:cur==1}">2.企业认证</li>

            </ul>

            <div class="tab-content">

                <div v-show="cur==0">内容一</div>

                <div v-show="cur==1">内容二</div>

            </div>

        </div>

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

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                cur:0 //默认选中第一个tab

            },

        }); 

    </script>

</body>

</html>

 

<!DOCTYPE html>
<html lang="cn-zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li {
margin: ;
padding: ;
list-style: none;
}
#app {
width: 600px;
height: 400px;
margin: auto;
border: 1px solid #ccc;
}
.tab-tilte{
width: 90%;
}
.tab-tilte li{
float: left;
width: 50%;
height: 44px;
line-height: 44px;
text-align: center;
background-color:#fff;
cursor: pointer;
}
/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active{
background:url('./a.png') no-repeat;
/* 地址是背景图标 */
color: #fff;
background-size: 100% 44px;
}
.tab-tilte .active1{
background: url('./b.png') no-repeat;
/* 背景图标 */
color: #fff;
background-size: 100% 44px ;
}
.tab-content div{
float: left;
width: 25%;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<ul class="tab-tilte">
<li @click="cur=0" :class="{active:cur==0}">1.验证手机</li>
<li @click="cur=1" :class="{active1:cur==1}">2.企业认证</li>
</ul>
<div class="tab-content">
<div v-show="cur==0">内容一</div>
<div v-show="cur==1">内容二</div>
</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
cur: //默认选中第一个tab
},
});
 
 
</script>
</body>
</html>

vue中的tab栏切换内容变换的更多相关文章

  1. 使用vue封装一个tab栏切换的左侧导航栏的公共组件

     首先看最终效果图: 1.compent文件夹里添加tab文件夹,里面创建index.vue index.js index.css index.vue内的template部份代码如下:(最新更正:代码 ...

  2. Vue项目中实现tab栏和步骤条的数据联动

    也就是tab栏切换步骤条随之变化 <template>   <div>     <!-- 面包屑导航  -->     <el-breadcrumb sepa ...

  3. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  4. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  5. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  6. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  7. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  8. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  9. tab栏切换，内容为不断实时刷新数据的vue实现方法

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...

随机推荐

  1. flask下载excel

    flask 应用的基本结构: htmlweb.py -- static -- templates 将 bootstrap.min.css 放到 static 文件夹下,在 templates 文件夹下 ...

  2. 【反编译系列】一、反编译代码（dex2jar + jd-gui）和反编译资源（apktool）

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! [反编译系列]二.反编译代码(jeb) [反编译系列]三.反编译神器(jadx) [反编译系列]四.反编译so文件(IDA_Pro) 概述 ...

  3. NumPy 超详细教程（2）：数据类型

    系列文章地址 NumPy 最详细教程(1):NumPy 数组 NumPy 超详细教程(2):数据类型 NumPy 超详细教程(3):ndarray 的内部机理及高级迭代 文章目录 NumPy 数据类型 ...

  4. SpringCloud分布式微服务搭建（二）

    这个例子主要是将zuul和eureka结合起来使用,zuul作为反向代理,同时起到负载均衡的作用,同时网关后面的消费者也作为服务提供者,同时提供负载均衡. 一.API网关(摘自百度) API网关是一个 ...

  5. 基于百度AI开放平台的人脸识别及语音合成

    基于百度AI的人脸识别及语音合成课题 课题需求 (1)人脸识别 在Web界面上传人的照片,后台使用Java技术接收图片,然后对图片进行解码,调用云平台接口识别人脸特征,接收平台返回的人员年龄.性别.颜 ...

  6. 网页设计（CSS&JS）

    实验一  简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...

  7. arcgis api 4.x for js 结合 react 入门开发系列"esri-loader"篇（附源码下载）

    基于上篇的介绍,虽然有比较esri-loader.@arcgis/webpack-plugin,还是觉得有必要需要讲述一下“esri-loader”的开发模式,待大家体验后也会有更直观的感受.本篇文章 ...

  8. android:layout_weight属性详解

    weight:重量.权重. 当我们给一个view设置了android:layout_weight属性,意味着赋予它话语权,常规思维就是谁的weight大,谁说了算(空间占比大). 下面我们来看下具体的 ...

  9. redis cluster + sentinel详细过程和错误处理三主三备三哨兵

    redis cluster + sentinel详细过程和错误处理三主三备三哨兵1.基本架构192.168.70.215 7001 Master + sentinel 27001192.168.70. ...

  10. Windows10家庭版运行应用提示”管理员已阻止你运行此应用...“的解决办法

    win10版本家庭中文版: 运行应用程序报错: 解决办法(亲试): 1.进入”控制面板“--”用户账户“--”用户账户“,选择”更改用户账户控制设置“,选择最后一项,点击”确定“按钮,如下图: 2.按 ...