vue实现tab选项卡功能
效果图
<div class="study-title">
<button @click="study1">寓教于乐</button>
<button @click="study2">寓教于学</button>
<button @click="study3">学以致用</button>
<button @click="study4">勤学动脑</button>
</div>
<div class="study-content">
<div
class="study-item"
v-show="imgs == 1"
></div>
<div
class="study-item2"
v-show="imgs == 2"
></div>
<div
class="study-item3"
v-show="imgs == 3"
></div>
<div
class="study-item4"
v-show="imgs == 4"
></div>
</div>
data(){
return{
imgs : 1
}
},
methods:{
study1() {
this.imgs = 1;
},
study2() {
this.imgs = 2;
},
study3() {
this.imgs = 3;
},
study4() {
this.imgs = 4;
},
}
.study-title {
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.study-title button {
width: 210px;
height: 70px;
color: #fff;
border: none;
background: rgb(255, 150, 0);
cursor: pointer;
border-radius: 40px;
font-size: 32px;
line-height: 70px;
box-shadow: 2px 2px 10px rgb(175, 175, 175);
}
.study-item,
.study-item2,
.study-item3,
.study-item4 {
width: 1400px;
height: 468px;
margin: 0 auto;
background-repeat: no-repeat;
margin-top: 20px;
}
.study-item4 {
background: url("../assets/1.png");
}
.study-item {
background: url("../assets/2.png");
}
.study-item2 {
background: url("../assets/3.png");
}
.study-item3 {
background: url("../assets/4.png");
}