文章目录
选项卡结构
css样式
如何选择切换选项
选项卡结构
用一个盒子把三个选项都包起来,使用flex布局的justify-content:space-between,使选项间距相等
css样式
.courseTab {
width: 100%;
height: 1.466667rem;
top: 0;
box-sizing: border-box;
padding-top: 10px;
z-index: 999;
background: #fff;
box-shadow: 0 2px 4px 0 hsl(0deg 0% 80% / 20%);
display: flex;
flex-direction: row;
position: relative;
justify-content: space-around;
padding: 0.533333rem;
.courseTabItem.active {
font-weight: 600;
color: #3ca7fa;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
left: 50%;
border-radius: 0.133333rem;
top: 0.613333rem;
margin-left: -0.333333rem;
width: 0.666667rem;
height: 0.08rem;
background-color: #3ca7fa;
z-index: 999;
}
}
.courseTabItem {
display: inline-block;
width: auto;
height: 0.4rem;
font-size: 0.4rem;
font-weight: 400;
color: #333;
line-height: 0.4rem;
cursor: pointer;
position: relative;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
如何选择切换选项
方法很简单,就是用一个active变量记录选项的状态,但点击一个选项,active跟着变化
<div class="courseTab">
<div
class="courseTabItem"
:class="{ active: active == 1 }"
@click="change(1)"
>
介绍
</div>
<div
class="courseTabItem"
:class="{ active: active == 2 }"
@click="change(2)"
>
目录
</div>
<div
class="courseTabItem"
:class="{ active: active == 3 }"
@click="change(3)"
>
评论
</div>
</div>
export default {
data() {
active: 1,
}
methods: {
change: function () {
this.active = 3;
},
}
}
