JS实现选项卡效果的代码实例

选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。
先来布局一个简单的页面：

成都创新互联公司于2013年创立，是专业互联网技术服务公司，拥有项目网站设计、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元路南做网站,已为上家服务,为路南各地企业和个人服务,联系电话:13518219792

  
    
    
    
  
  
    

      
      

        
新闻
        
社会
        
科技
        
娱乐
      
      
      

        
新闻
        
社会
        
科技
        
娱乐
      
    
  

选项卡的制作原理是：有若干的选项和对应数量的内容，当对其中一个选项进行操作时，显示对应内容，其他内容不显示。所以，在页面布局的时候，我们先给一个选项设置特殊样式和显示其对应的内容，其他选项样式不变，对应内容隐藏。当操作选项时，把选项的类名改为特殊样式的类名，并且显示对应内容。

今天在做选项卡效果时遇到了一个非常低级的错误，但却迟迟找不到原因，如下：
这个是我布局的选项卡的菜单，看起来很简单，一个ul包着3个li，其中一个是 |，所以可以点击的菜单项只有两项，没毛病。

  
必备软件
  
|
  
常用软件

内容就不看了，接下来我就开始写JS的代码，getElementById什么的巴拉巴拉开始写，写完for循环觉得写完了，然后就运行。。。默认页正常，点击，，空白。？？？？？怎么回事？F12，aLink[i] is undefind；加了一个console.log，检测获取的aLi,aLink，有值，能获取，没错。然后下面循环检测aLink[i]，未定义，这是什么情况？在JS代码搞了将近一个小时，换获取方法，换变量名….各种方法，没效果。万万没想到的是，重新检测aLi的时候，发现长度为3。。顿时懵逼，aLink的长度为2，所以肯定有一个找不到。赶紧把第二个li改成span，成功。万恶的 ||||||||。只能说自己的知识还不够，还要继续努力！！！

var oBox=document.getElementById('box');
var oNav=document.getElementById('nav');
var aLi=oNav.getElementsByTagName('li');
var oCon=document.getElementById('con');
var aLink=oBox.getElementsByClassName('hide');

for(var i=0;i

以上所述是小编给大家介绍的JS选项卡效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！