00:00
好了,各位对比完了路由组件和一般组件之后啊,我们继续呢完成这个案例,现在有一个问题,就是我点击about和home的时候,它们并没有高亮的效果,对吗?你可能说老师有一点点啊,好像点谁呢谁有点变成淡淡的灰色,那是boot strap自带的一个效果,就是你什么也不写,Boot strap也有这效果,说老师也没见到你把这boop引入啊,说老师这是一个细节上的问题,你看啊,找到静态页面,找到root配置一人,这里边不有样式吗?但是你发现样式也是BOO dropp.CSS由于在我们的代码当中,你在public里边是不是已经把这个boattrap引进来了,哎,所以说你就不用再引入了呀,嗯,给它关掉来,那这是一个问题,对吧,我们就要把它解决掉,点击的时候得让about和home有蓝色的高亮是吧,咱们把这个呢。给大家清空清空啊,要不呢,一会儿输出就太多了,好吧,嗯,那回到我们的代码中,然后呢,我把这个components hier里边的这个输出啊,我不删,同学我住掉行吧,哎,然后呢,About里的这个输出呢,我也住掉是吧?好来折叠起来。
01:16
折叠折叠这儿呢都关掉,来这回呢就能干净一点啊点点点,哎,这也没什么输出来吧,同学你说加高亮的效果其实挺简单的,是不是谁有active谁就高亮啊啊那你回到这儿来看我们的代码当中找到APP,这两个人呢,之前都是有一个属性叫做active,你看我给你加上啊active,我这active是给谁加的呀,是不是给about,你回到页面看效果,同学about是不是就亮了,但是你这样写就写死了,对吗?同学,我得是点谁给谁加ACTIVE5你总不能这样吧,说老师我给两个人都加,这是不可能的,两个人都亮不可能,那所以说怎么实现呢?来同学不用卖什么关子了,非常简单,如果说您的路由链接是有高亮效果的。
02:07
哎,或者说呢,点这个路由链接的时候,我要动态的给它追加一个样式的类名,对吧,你比如说点击about,那我就动态的给你追加一个,注意是追加,而不是替换呢啊追加我就把active给你放在这儿,那就不能用link了,如果你用link,那就意味着你所写的路由链接不带有高亮效果,如果你想高亮,同学们别用link,用link的一个升级版叫做navy link,走,然后这替成neli,这替成nali,好啊好来回到页面呢,看一下效果,我先给这删掉啊3000同学我说谁也没点,谁也没点,当然人这就不给你展示嘛啊刷新一下来看着点about它,About它内容这就亮了,点这诶你看对吧,同学啊说老师那行了,这就讲完了呗。同学,咱得说点细节上的事儿怎么的,加了navy link,他就有这效果了呀。
03:05
啊,同学,我们知道home,如果它想高亮,对于boat strap来说,我们的设计师你得加上active这个类名,它是不是就亮了,那同学也就意味着你用navy link之后,点谁就是给谁加了一个active,你知道吗?这是碰巧了,啥意思呢?Navy link的设计理念就是说如果你点了我,我就给当前你正在被你点的这个人追加一个样式的类名,就叫active,那boat rap也说,哎,说呢,那这个,呃,我就是这么一个设计理念,给谁加active呢,谁就高亮,他俩刚好一样,你知道吧,但是有些时候同学万一你用的不是boat strap呢,或者说就算我用boat strap,同学,现在我不想要这效果了。蓝色的背景,白色的文字,我想换一换。对吧,那咋办呢?
04:01
哎,所以说同学这里边是有一个属性的啊,Nay link里边能多传一个属性,这个属性的名字就叫做active class name active class name只用于干一件事,就是当你点击navy link的时候,它到底加哪个样式的类名,你比如说如果你点的时候,你给他写上叫做active,那跟刚才的效果是一样的,这个加这个是不是也得加呀?你要是这样写的话,如果你那个样式的类名啊,高亮的那个效果叫active,我劝你一句,同学这儿呢,你也就别写了。你也就别写了,为啥呢?因为你不写,默认它也是active是吧,但是我现在有要求叫DEMO啊,或者叫做at硅谷对吧?好来点,谁就给谁加上一个样式的类名叫艾特硅谷,那首先你是不是得有这个样式艾特硅谷对吧?啊,那我在哪写呢?同学,我这样,我简单点,我省事点,我当然可以这么做,同学新建一个app.css完了往这个里边写东西,但是你看就无缘无故我又弄出来一个app.css是吧?哎,他就犯不上了,所以说呢,我右键给它删除,我放哪呢?我放public,这是不是有一个页面,同学不说别的,你所有的东西是不是都得最后放到这个页面里啊,那所以说我在页面里边写一个样式可以吧,哎,Style走第二,At硅谷,呃,背景色呢,我让它是橙色吧,啊,Orange橙色或者是我让它再深一点的橙色啊,是是这种是吧,这种深一点的好啊,然后呢,它这个。
05:35
字体的颜色呢,我让它是白色好,有没有这个样式的类名有了啊,那这呢就加是吧,哎,那我们看一下效果啊,来注意home I about同学啊,但是它有点小问题,你看啊,你看我点的时候它不断的在闪,你觉得吗?你看一下现在是不是about来我点home。你看home也没亮,而且你挪走的时候,诶它也不亮,哎,你再点可能还闪一下,这怎么情况呀?啊同学我说一下是这么回事,你不是用了BOO stra吗?Bo stra的样式啊,这权重有点高,所以说你需要做的是把你自己写的这两个样式啊权限给它提到最高。
06:15
啊,加个important就可以了啊,这不是你的锅来,你看这回一点同学怎么样,是不是有效果了,OK不about,哎,这呢home行,那你看一点有高亮的效果了吧,而且右键你检查,你发现那俩A标签啊,你看。你点的是home,就给home加at硅谷,你点的是about,就给about加at硅谷,对不对?哎,好了,关掉,这就是navy link的使用啊,那注意呢,它那个属性名叫这个,如果你想加的那个样式的类名叫active,那这个属性呢,你就可以不写了,哎,所以说navy link呢,就是比link再高级那么一点,哎,好了,那这个视频呢,我们停一下。
我来说两句