基于JS实现网页中的选项卡（两种办法）

网页中经常会用到选项卡这种东东，说白了就是点击一个选项，下面会弹出这个选项里的内容。

方法一

方法一利用简单的代码即可实现，以下是全部的代码；

  
 
 
 
   {margin: 0;padding: 0;}
   #box{idth: 600px;background: #c;margin: 0 auto;}
   li{list-style: none;}
   #ul1{display: block; idth: 100%;overflo: hidden;}
   #ul1 li{idth:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
   #content{idth: 100%;margin-: 20px;}
   #content div{display: none;}
   #content div.active{display: block;}
   .sho{background: red;}
 
  
  
 
   

 
首页
 
产品
 
新闻
 
联系
 
我的
   
   
 
   

  
ne1
  
ne2
  
ne3
   
 
 
   

  
ne4
  
ne5
  
ne6
   
 
 
   

  
ne7
  
ne8
  
ne9
   
 
 
   

  
ne10
  
ne11
  
ne12
   
 
   
   

  
ne13
  
ne14
  
ne15
   
 
   
 
 
  

我们在HTML部分定义网页选项卡中的内容。

   

 
首页
 
产品
 
新闻
 
联系
 
我的
   

 
   

  
ne1
  
ne2
  
ne3
   
 
 
   

  
ne4
  
ne5
  
ne6
   
 
 
   

  
ne7
  
ne8
  
ne9
   
 
 
   

  
ne10
  
ne11
  
ne12
   
 
   
   

  
ne13
  
ne14
  
ne15
   
 
   
 

CSS部分对HTML中的内容进行修饰

   {margin: 0;padding: 0;}
   #box{idth: 600px;background: #c;margin: 0 auto;}
   li{list-style: none;}
   #ul1{display: block; idth: 100%;overflo: hidden;}
   #ul1 li{idth:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;}
   #content{idth: 100%;margin-: 20px;}
   #content div{display: none;}
   #content div.active{display: block;}
   .sho{background: red;}
 

是最重要的js部分

JS语句中的第一个for循环是为了取得所有的选项卡中的点击部分；因为I这个变量在下面的事件函数中无法访问到，所以每次点击时，i变量循环到oli.length值。将i的值交给一个我们自定义的元素属性上来保存循环中i的值，供下面使用。即oli[i]._index=i;

添加点击函数后，第二个for循环是为了把所有的oli的className改为“空”和所有的odiv的style为display='none'；循环结束后，在给当前点击的这个oli添加className和下面相应的odiv的style为display='block';

以下是运行的结果

在编写程序时一定要注意，选项卡中的点击部分即li的数量（JS里oli.length）要和下面ID为content的div里包含的div数量（JS里odiv.length）相同，我在编写程序时就因为oli.length与odiv.length不相等，导致程序报错，好长时间都找不到错误；总而言之还是要多多细心。

方法二

方法一适用于选项卡比较少的情况，但如果选项卡内容较多时我们要用到这种方法，第二种方法运用到了这周我们老师讲的一个在JS种比较重要的知识点自运行函数

(function a(){
  //函数里的内容   
   })(参数);

定义函数a();给整个函数带上括号，后面的括号为输入参数；

以下为方法二自运行函数的程序

  
 
 
 
 
    {
 padding: 0;
 margin: 0;
 list-style: none;
   }
   .tabMenu {
 idth: 300px;
 margin: 50px auto 0 auto;
   }
   .tabMenu ul {
 display: block;
 overflo: hidden;
 idth: 300px;
 height: 40px;
 background: #eee;
   }
   .tabMenu ul li {
 cursor: pointer;
 display: block;
 float: left;
 idth: 100px;
 text-align: center;
 height: 40px;
 line-height: 40px;
 font-size: 16px;
   }
   .tabMenu ul li.active {
 background: #f00;
 color: #fff;
   }
   .tabMenu .tabSide {
 display: none;
 padding: 10px;
 line-height: 20px;
 idth: 278px;
 border: solid 1px #eee;
   }
   .tabMenu div.active {
 display: block;
 padding: 10px;
 line-height: 20px;
 idth: 278px;
 border: solid 1px #eee;
   }
 
  
  
 
   

 
tab1
 
tab2
 
tab3
   
   内容1
   内容2
   内容3
 
 
   

 
tab1
 
tab2
 
tab3
   
   内容1
   内容2
   内容3
 
 
 

 
tab1
 
tab2
 
tab3
   
   内容1
   内容2
   内容3
 
   
 

 
tab1
 
tab2
 
tab3
   
   内容1
   内容2
   内容3
 
  

和方法一相似先写HTML里的内容，CSS部分对HTML进行修饰，我们直接来看JS部分；

通过添加事件和自运行函数完成多个选项卡。