<!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
>
所有评论(0)