用js实现简单的tab选项卡

这篇文章主要为大家详细介绍了用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技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程