logo竹子建站
全新功能上线:使用tab组件做页面跳转效果
2020-07-16 15:45:43

网页内容既多又杂,不知道该如何排版整理,直接铺开来放在网页上又怕没人看?

如果你正面临着这样的问题,那么只能说明一件事,那就是你不知道如何使用竹子编辑器里面的Tab组件!

Tab组件可以将内容进行分类,可以在只占据网页较小一部分纵向空间的情况下,展示很多的信息内容,它的画风是这样子的:

而本次我们的功能更新就是针对Tab组件进行的,我们优化新增了两个tab组件的功能,现在它可以适用的场景就更加多样啦!
一、鼠标移入激活tab
从前我们的tab组件切换tab项时都是需要点击进行切换的,现在支持鼠标移入激活来进行切换啦!
设置方式也很简单,我们点击tab组件,依次选择:设置——交互——子项激活方式——hover激活,点击保存即可。

这样设置完成以后,我们点击发布网站,将现在的修改同步到实际网页中去,那边实际网页中的效果就会是这样的:

二、导航设置进行tab子项的跳转
不止一次有客户反馈希望在导航栏上面设置链接,可以直接跳转到tab组件的一个子项目上面,所以我们对此进行了功能更新。
可能字面的描述比较抽象,所以小编就先把网页的实际跳转效果先展示给大家看一下:
现在我们导航上设置的页面跳转就可以达到上图的效果,可以更有效的去利用我们的tab组件来进行页面排版的设计布局。
而这里的跳转设置也并不复杂,首先同样的我们点击tab组件,依次选择:设置——交互——子项激活方式——路由Hash,点击保存。
这里设置完成以后,我们就可以去到导航中设置相应的跳转链接,以上图中这个网站为例,我们的第一个导航中设置的链接为:/16#act-0
链接中的/16是指向当前页面的编号,我们可以在编辑器里面找到页面的编号,如果是首页没有这个页面编号我们可以直接使用/,即链接可以设置为/#act-0
而链接中的另一部分,#act-0表示的是激活显示哪个tab组件的子项分栏,比如现在的#act-0就是显示第一个tab子项,#act-1则是显示第二个tab子项,#act-2则是显示第三个tab子项,以此类推。
然后我们到导航栏中,设置相应导航的跳转网址即可,设置完成以后不要忘记保存哦!
上述设置完毕以后,我们就可以点击编辑器右上角的发布网站,将对网页的修改同步到实际网页中去了。
好了,以上就是本次我们tab组件更新的全部内容了,我们下周再见吧,拜拜!