Tab栏图片切换_tab栏图片运用-CSDN博客

本文链接：https://blog.csdn.net/qq_62334672/article/details/125092550

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Tab栏</title>
<script src="./vue.js/vue.js"></script>

<style>


#tab{
width: 500px;
margin: 0 auto;
}
.tab-title{
font-size: 0;
width: 500px;
}

.tab-title a{
display:inline-block;
height: 40px;
line-height: 16px;
width: 25%;
text-align: center;
background:#e1e1e1;
color:#333;
font-size: 14px;
text-decoration: none;
}
.tab-title .cur{
background: #09f;
color: #fff;
}
.tab-content div{
border: 1px solid #e7e7e7;
height: 200px;
padding-top: 20px;
}

</style>

</head>
<body>

<div id="tab">

<div class="tab-title a">

<a href="javascript:void(0);" @click="curId=0" :class="{'cur':curId==0}">分类1</a>
<a href="javascript:void(0);" @click="curId=1" :class="{'cur':curId==1}">分类2</a>
<a href="javascript:void(0);" @click="curId=2" :class="{'cur':curId==2}">分类3</a>
<a href="javascript:void(0);" @click="curId=3" :class="{'cur':curId==3}">分类4</a>
</div>
<div class="tab-content ">
<div v-show="curId==0">

<img src="png/1.png" alt="" width="100%">
</div>
<div v-show="curId==1">
<img src="png/2.png" alt="" width="100%">
</div>
<div v-show="curId==2">
<img src="png/3.png" alt="" width="100%">
</div>
<div v-show="curId==3">
<img src="png/4.png" alt="" width="100%">
</div>
</div>
</div>
<script>
var vm= new Vue({
el:'#tab',
data(){
return{
curId:0
}
},
})
</script>
</body>
</html>