时间:2021-07-01 10:21:17 帮助过:30人阅读
- 标题一
- 标题二
- 标题三
- 标题四
内容一内容二内容三内容四
现在的显示效果如下图:
四个tab标题和四个内容区都显示在了页面中,现在要实现tab切换效果,即点击标题一,内容一显示出来,其他内容不显示;点击标题二,内容二显示出来,其他内容不显示……
那么,整体思路很简单,给四个标题绑定事件,触发的时候对应的内容显示,其他的内容隐藏。
方法一:点击标题对应的内容显示,非点击标题对应的内容隐藏。代码如下:
方法二:先设置所有内容隐藏,然后点击标题对用的内容显示。代码如下:
方法三:显示和隐藏通过是有拥有class控制,先把所有的内容隐藏dispaly设为none,而该class的display设置为block,遍历所有标题节点和内容节点,点击标题后,该标题节点和对用的内容节点拥有class,其他的没有。代码如下:
- 标题一
- 标题二
- 标题三
- 标题四
内容一内容二内容三内容四
该方法的缺点是,内容块的div下面不能再有div标签了。
方法四:不用js,用“input:checked”来做tab切换,先把所有的内容隐藏,被选中的内容显示。代码如下:
input:checked实现tab切换 内容一
内容二
该方法的缺点是,不同区域切换只能通过点击。
以上就是为大家总结的tab切换实现方法,希望对大家的学习有所帮助,顺着这个思路动手制作自己tab切换特效。