基于JavaScript实现选项卡效果

前端之家收集整理的这篇文章主要介绍了基于JavaScript实现选项卡效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一个简单的选项卡的关键在于:当切换页面时,如何让所选的选项和与其对应的内容同时出现,并且在选择其他的内容时,不影响新的内容显示

其中用到两个很关键的思想:

1.为对象增加index属性,并通过this对index 的调用来使每个选项能显示出所对应的内容,并且属性值要设置为循环时的数值-i。 2.通过对class(类)的灵活使用,来改变当先所选中目标的样式。 3、用for循环嵌套事件对每一项进行遍历。 4、在编译时,位于body中的div和input要有预先定义的行内样式或者信息。 5、button和div.style.display要同时清零,同时出现才能达到选项卡的目的。

代码

<Meta charset="UTF-8"> 选项卡