利用JavaScript怎么在网页中实现一个选项卡功能

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

      
        
首页
        
产品
        
新闻
        
联系
        
我的
      
       
        
          

            
new1
            
new2
            
new3
          
        
        

          

            
new4
            
new5
            
new6
          
        
        

          

            
new7
            
new8
            
new9
          
        
        

          

            
new10
            
new11
            
new12
          
        
          

          

            
new13
            
new14
            
new15
          
        
      
    

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

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

最后是最重要的js部分：

      window.onload=function(){
        var oli=document.getElementById("ul1").getElementsByTagName("li");
        //alert(oli.length);
        var odiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素
        //alert(odiv.length)
        for(var i=0;i

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();给整个函数带上括号，后面的括号为输入参数；

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

  
    
    
    
    
  
  
    
      

        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部分；

看完上述内容，你们对利用JavaScript怎么在网页中实现一个选项卡功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4