00:00
在上次课程当中啊,咱们已经将右侧选项卡整体的布局搭建好了,好咱们观察一下,那么右侧的布局和左侧的布局它俩是不是相通的呀。诶,它俩是相通的啊,那么两侧呢,都是选项卡,好,那么大家还回忆一下,咱们之前左侧的选项卡是不是只是完成了布局,而没有完成它具体的点击效果,这是因为当时咱们说到了整体页面当中是不是有两处位置都是选项卡,那我何必左边实现一遍,右边实现一遍,那代码是不是就重复了呀?说老师咱们点的元素也不一样,那显示的内容也不一样,怎么叫重复了呢?诶,那你就再想一想吧,你既然点,那咱们无外乎点的一般是按钮或者是什么LY是不是偏多对吗?好,那你回忆一下子吧,之前这咱们的布局是什么H4。
01:05
还记得不?诶,这是咱们之前写的H4啊,好,那么这个位置是不是咱们刚刚所写过的LY,那问你了,发生事件的元素不一样,妨碍你点击了吗?并不妨碍是不是只是发生事件的元素是不一样的而已,那我按钮也可以对吧,A标签也可以,LY也可以,H4也可以,任何一个元素是不是都有可能发生事件。对不对,诶好,来再再再来想。那么我左侧的这个位置是不是div。对吗?那么右侧的这个位置是不是也是div?那好问你假设这个位置div啊叫A,那这个位置div啊叫B,假设同志们A不要较真啊,来假设,那么我现在切换是不是要么就是a div里边的内容,要么就是整体be div里边的内容是不是就是这个道理,但是内容显示什么,你关心吗?
02:06
其实在做这个切换效果的时候,按道理来说你是不关心的,你只需要什么能点能切换就可以了,哪怕显示个12345呢。是不是这个道理?哎,好,来,我把它撤掉啊。那既然是这样,咱们就直接找到这个index.js这个文件,前面的这些函数,你该收起来的就收起来,诶,我已经说过了啊,来这加上一行注释,写上封装一个什么公共的。嗯,公共的一个选项卡函数,好function啊,咱们给它起一个名就叫做卡,但是我问一下啊,咱们现在这个tub的函数是直接调用吗。不是,同志们一定是什么,我点。
03:00
左侧选项卡,或者是我点右侧选项卡,无论我点击是左侧还是点击右侧的同时,它是不是才会帮我来进行切换呀。所以这个函数能直接进行调用吗?哎,你别又顺手了,诶不要用这个惯性思维啊,好,那么在这里边咱们刚看到了,它里边是不是需要两个部分,一个是什么?诶,被点击的元素。啊,这需要的是第一个被点击的元素,那么第二个就是被切换显示的元素,好,我要么知道你点的是H4还是点的是LY。所以这个位置咱们给它起一个名儿吧。咱们第一个行餐呢,给它起一个名儿叫做BTNS,诶,你甭管它是这个按钮也好,还是说是这个这个其他元素也好啊,咱们就起这个名好,那第二个叫做被显示的元素,一般呢,你可以叫div啊,或者咱们叫什么cons,就是contents啊,Content的那个单词的一个缩写,好,那么现在这个元素对应的是第一个蚕,诶这个元素对应的是第二个蚕好。
04:20
那现在首先我是不是得先把这些元素先拿到,拿完了之后是不是挨个来进行遍历,给它进行加点及事件。对吗?嗯,但是具体获取的哪一个元素,咱们就不要放到这个tab里边了,为什么?因为它是一个公共的,如果你把确切的元素都已经放进来了,那它还叫公共的吗?就不叫了,哎,就为某一块来进行服务了,对不对?好怎么办?直接for循环。A直接负循环来YA等于零,然后A小于你之前所点击的这些元素集合的一个长度,然后哀加加,然后啊,给这些元素里边的每一个咱们都添加点击事件,好点完了之后你发现了,无论你点的是H4也好,还是点的是LY也好,它是不是都有一个默认的样式,对吗?嗯,来,我所点击的这个它的class name等于啥active,所以这就是为什么我这也叫active,这也叫active的原因了,所以不要给自己找麻烦,哎,你别自己想着我就为了把它的样式区分,没必要啊,没有必要啊,好,那么现在我点完元素,它的样式加进去了之后,那好了,那接着我是不是还得想着我点完底下的内容,是不是也跟着我的这个元素一块同步啊?
05:53
那就得想一想吧。你上方我以咱们刚才写过的这个选项卡为例,整体上方是不是五个对吗?那它的下标一定是01234。
06:08
对吧,诶,这是它里边的下标,咱们现在所对准的是不是一下标的这个。那么你底下整体一个大的div当中,是不是也有五个div,诶假设啊,这是第一个,这是第二个,然后这是第三个,这是第四个,这是第五个,我给你标注这是不是也是从01234,好,那你看吧,上面是01234,底下也是01234,那我怎么找到对应的一下标的这个元素。是不是我得首先确定一下谁呀,我所点击的是第几个下标的,然后拿着他的这个序号好怎么着,诶去找到对应下标的那个div。
07:01
所以这是你第一步骤要确定的,下一个步骤才是找到对应的div元素了。所以怎么办?你得在你点击之前,是不是每一个元素的身上都应该有一个下标的自定义属性,是不是方便你点击之后来进行获取。对吧,当然这个自定义属性啊,你可以使用什么点或者中括号的这种方式来进行写入,也可以直接settribute,都没有关系,来咱们就简简单单的啊,那么在这呢,去加上点index等于什么I。啊,这个自定义属性的名啊,你可以真的自定义哈,你真的可以自定义啊,好,我说了,那么现在这个div集合里边哪一个是不是this.index的那一个,它的class name等于active,是不是你所选中的那一个div,让它的class等于active,而它的class active真正做的是什么事啊,咱们给它拉到底。
08:09
看一下咱们刚才干了件什么事,是不是让他display block呀,对不对?诶,把它甩到一边去啊,让他display block,而其余所有的没有active的是不是都默认为隐藏啊?好,那么在这你是不是还得加上另外一层for循环,Y勾等于零,然后勾小于BTNS,当然你小于BDNS的长度可以,或者说你直接小于div里边的这个长度也可以,因为它俩的长度是一样的。诶,一样的,好,那么咱们来看一下啊,当中我点哪一个,哪一个后背景是红的,而其余是诶白色的,所以怎么着你给BTN当中的每一个别光是来给人家加啊,其他的这些你是不是得给人家做一个清除啊,是不是div,道理是不是也是相同的,Div里边的每一个,我让它的class name都等于被空,那它没有class,那它默认是不是就走display。
09:14
而你的这个也好,H4也好,我没有class,那它默认上边还有这个边线吗?没有,还有对应的这个背景颜色吗?也没有。那么这个公共函数啊,可能就算封装完了。啊,咱们就算封装完了,那么现在它只是封装完了,我是不是还得找地儿去调用啊,对吧,找地去调用啊,那么它现在调用很明显,我需要左边单纯点击,右边单纯点击怎么办?再来两个函数。点击左侧选项卡,诶,点击左侧选项卡function leftopb,诶,点击左侧。再来。
10:00
点击右侧选项,看好function加上一个right。嗯,那么你现在左侧选项卡只需要做的是什么,找到对应你要切换的元素就可以了。来吧,咱们把咱们的这个页面给它打开。好,找到对应的这个位置,点击右键检查这个H4,嗯,这个H4点这个吧,嗯。来,在这咱们去加上一个YH4S等于document.so,诶把这个H4给它放进去,这个呢,是咱们之前说过的被点击的元素。诶,当然这个HH4S是不是也是这个tab BT ns它的一个参数。对吧,嗯,好。来,再下一个被切换显示的元素,那我就叫做什么divs,等于document,点上letter o,把这个位置里边点击检查是不是在它当中的div啊,嗯。
11:19
哎,咱们自己给它加一个吧。空格别忘了加上一个div好,那么现在这两个元素都有了之后,怎么着在这去调用一下函数。嗯,调用函数,你把你所需要点击的元素告诉我。然后你再把你需要切换的元素告诉我好了,那此时函数一旦被激发出来,那么在这个位置里边的tas,它所对应的食参是不是就是你现在写的H4S?而你现在的tub cos,它的食参是不是就对应到了divs?
12:02
是不是这个道理对吗?嗯,好。那么现在这个位置搞定了之后,好,那这个选项卡它自己本身需不需要调用,它需要调用,而右侧选项卡也需要调用。只是这个tab,它作为在这两个函数当中公共的一个部分,咱们是不是给拎出去了呀。对吧,诶给拎出去了啊好,那么咱们现在再去来写一下右侧的选项卡。右侧选项卡呢,首先需要找到它里边的,嗯,来把这个部分拿出来。这个叫做被点击的元素YLYS等于。Document,点上letter o,来把这段代码给它放进去。紧接着叫做被切换的。显示元素divs等于点O,来吧,在这个位置里边,咱们需要找到它,把这一段拿过来。
13:09
嗯,好,那么现在这个元素有了之后,我需要紧接着干啥,去调用这个公共的函数,把刚才咱们写进去的这个参数给它一个一个的放进去。诶根一个的放进去啊好来,咱们这样的话,写完之后咱们去运行看一下效果。点。点点点,诶这个部分当中的内容,咱们是不是有的地方没有给它去做隐藏,对吧?诶没关系啊,一会咱们再去搞一搞它的样式,看一下右侧,右侧当中的内容是不是可以的,对吗?好,来啊,咱们去找到一下这个位置。找到咱们的样式表,所以有的时候啊,咱们再去写这个项目呢,不一定是之前就能够一次成型,诶来在这咱们找到它的div啊div。
14:04
Div当中啊,默认所有的怎么都让它display当中的那。诶,都让它display当中的,那然后我让它对应显示的这个部分加一个display block。咱们再运行一下啊。来右键看一下,咱们现在点击推荐品牌,这是没有东西对吗?来看一下人家的是不是有推荐品牌内容这四个字啊,来吧,找到咱们之前的一个布局在这,诶这个位置给它加进去啊。来再点一下。刷新。是不是加错位置了呀。先回来。啊,这个位置里边没有关,没有错,咱们就在这个里面去加,就在这个位置里面去加,那么咱们来切换回来再看一下点击为啥没有呢?来右键看一下这个位置啊。
15:07
那此时如果说我点到上方咱们现在的这个推荐品牌,按道理来说是不是这个div里面应该有一个的active,但是你观察一下这个部分是不是只有相关分类,它自己在进行切换。所以你是不是看不到咱们的这个div,所以原因应该是在哪儿啊?诶,你应该是在获取的那个元素上面,为什么?因为咱们div里边这是不是也有div啊。对吧,诶这也有div啊,所以咱们之前说div整体的都让他display none了,嗯,你是不是人家看不到了呀,怎么办?在你获取的看一下啊,这个左侧lefttop当中的这个div,你别整体都选上的这个空格。这个是负元素下所有的div,咱们只要求什么切回来。
16:01
把它这个折起来,我只需要它下面直接的div是不是只有零和一两个,要么然他跟谁去切换了,这是第零个div,这是第一个div,是不是好多div啊,下标还对吗?下标就不对了,对吧?所以问题在哪?在你获取的上面是需要加上一个大于号,哎,加上一个大于号啊好来,咱们再去把这个底下关掉切换,这是不是就OK了呀。所以一定要记住什么,你当这个布局当中,你获取的这个元素里边细节的部分也有,那么你得看你要的是所有的div,还是说什么极个别当中的一个直接的div啊,是子后子代啊,还是它里边的所有的一个子孙的一个元素啊,好了,那么现在所有的这个选项卡的部分,咱们就给都给它添加完了。大家点完了之后,咱们会发现点完之后的这个部分是不是也少了一个左边框啊,嗯,它这些小细节的,咱们都给它往下拉一拉,给它补上啊。
17:10
嗯,在这儿。嗯,它加完一个左边框之后,好像所有的是不是都加上左边框了,对吧,就不合适了啊,就不合适了。怎么办呢?怎么这样我呀,把咱们对应的这个位置给它消掉啊,给它消掉好再看一下现在中间的这个部分是不是还是有重影对吗?诶点完之后左边的这个部分,它的边框是正确的,好我把整体的这个部分我先给它都注掉。诶,我就让它都偏左。
18:01
所有咱们都画左边框右侧的最后一个元素,我单纯给它画右边框是不是就可以了,对吧?诶在这写上啊and。冒号咱们的last child,把它的右边框给它补到这个位置上来。嗯,这它的边框是不是就正常了呀。对吧,边框正常了,然后它的内容也可以得到切换了,嗯,可以得到切换了啊好,这样的话呢,咱们就将整体它的一个选项卡的内容,咱们就实现完毕了。
我来说两句