JavaScript实现Tab栏切换特效

这里分享一个前端必会的案例,是一个Tab栏的切换效果,除了Tab栏本身会被点击切换之外,Tab本身也决定着其下方的内容板块的显示。

运行效果展示:

如上图所示,其实就是点击上方的Tab栏然后Tab栏本身的样式会被修改,然后其下方的内容块也会跟着显示对应的内容。这样的效果以及功能在前端的应用是非常广泛的,所以这可以说是前端必会了。话不多说下面先上代码:

(这里就不上CSS样式代码了,个人根据需求进行设置即可,li用float布局就好)

HTML的结构:

  • 商品介绍
  • 规格与包装
  • 售后保障
  • 商品评价(50000)
  • 手机社区
商品介绍模块内容
规格与包装模块内容
售后保障模块内容
商品评价(50000)模块内容
手机社区模块内容

下面是JS代码:

这里再说下实现步骤和思路(JS代码里已有详细分析):首先功能大致分两步:第一,对li标签的样式修改,即用户点击哪个li该li的样式随着改变为红底白字,而它之外的其他li则是灰底黑字的默认样式;第二,上面的样式修改了下面的文字模块的内容也要随之改变,下面其实是放了与li一一对应的div来装文字内容,只是它们的显示是由Tab栏的li决定的,所以要实现div的文字随着li变动我们就需要知道当前用户点击的是哪个li,这里用到的方法是 lis[i].setAttribute('index', i),即用循环给每一个li标签添加一个自定义属性index值等于lis(所有的li组成的数组)的索引,则根据index的值我们就能知道用户点击的是哪个li了,这样我们再决定是哪个div显示出来就可以了。(建议看代码结合注释更好理解一些)

注意:这里再说一下“排他思想”,即像这样的列表或是表格之类的元素对象,一般可以统一获取再存入一个数组中的元素对象,我们要控制当前选中的该元素和其他没有被选中的元素“有所不同”时,就常常设计“排他思想”,主要分两步实现:1.用循环遍历将这些所有的元素(包括选中的那个元素)都“干掉”,这一步主要是让所有的元素“都一样”谁也没有不同之处,然后再给我们选中的那个元素添加上我们想要给它的样式或功能(即留下我自己)。这样两步加起来,就实现了选中谁,谁“不一样”的效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的