导航条字下面的杠杆

来源: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.这个伪类是导航项下面的红色下划线,如下

http://img.mukewang.com/climg/5df9ef9209c297a001720093.jpg

而源码中已经用空div标签绘制红色下划线了,伪类不需要了,所以把它注释。如下:

http://img.mukewang.com/climg/5df9efc8098f9da506330196.jpg

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) ,添加此类名的导航就有了伪类,即导航项下面就有了下划线。


http://img.mukewang.com/climg/5df9f107093d457719140724.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程