这篇文章主要为大家详细介绍了用js实现简单的tab选项卡,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
tab选卡 现实网页的使用频率极高,基本上每个网页都需要使用一个或多个tab选卡
我们可以用js实现简单的tab选卡效果
代码如下:
简单的选卡效果 内容1内容2内容3
需要注意的是:this,此时的this相当于li[i]。
li[i].index=i; 这一步必不可少,这是让li与div建立联系的关键,如果直接把div[this.index].style.display=“block”;这句代码改为div[i].style.display=“block”;将会达不到效果,这是因为i的值一直在加一,最后将会等于li.length,使得将出现 不管鼠标在哪个选项 每个div都不会显示的错误结果。
正确的效果图为:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。
以上就是用js实现简单的tab选项卡的详细内容,更多请关注0133技术站其它相关文章!