<!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:
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
>