导航条字下面的杠杆
来源:5-4 导航条的双向绑定
迷失的小麦
2019-12-18 16:52:00
.header__nav-item_status_active::after{
/* content: ' ';
display: block;
width: 100%;
height: 2px;
position: absolute;
background-color:#f01400;
left: 0;
bottom: 0;*/
}
为什么源码中被注释掉了?我到目前为止不理解为什么addCls(navItems[idx],'header__nav-item_status_active');会改变::after里面的内容,我理解是只会颜色发生改变
1回答
好帮手慕夭夭
2019-12-18
同学你好,问题解答如下:
1.这个伪类是导航项下面的红色下划线,如下
而源码中已经用空div标签绘制红色下划线了,伪类不需要了,所以把它注释。如下:
2.不太理解同学描述的“会改变::after里面的内容”是什么意思?老师先给你讲解一下,如果不是问的这个,再重新描述一下,以便老师准确的为你解答。
addCls(navItems[idx],'header__nav-item_status_active');就是给导航项添加了一个类名header__nav-item_status_active(显示的第几屏,给对应的导航项添加)。它有两个作用,如下:
(1) 给导航文字设置红色字体。
(2)因为伪类就是在就是通过.header__nav-item_status_active这个选择器中绘制的(header__nav-item_status_active::after) ,添加此类名的导航就有了伪类,即导航项下面就有了下划线。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~