189 8069 5689

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

今天就跟大家聊聊有关利用JavaScript怎么在网页中实现一个选项卡功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

成都创新互联公司专注于兴县网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供兴县营销型网站建设,兴县网站制作、兴县网页设计、兴县网站官网定制、成都微信小程序服务,打造兴县网络公司原创品牌,更为您提供兴县网站排名全网营销落地服务。

方法一:

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



  
    
    选项卡
    
      *{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;}
    
  
  
    
      
        
  • 首页
  •         
  • 产品
  •         
  • 新闻
  •         
  • 联系
  •         
  • 我的
  •                                  
                  
    • new1
    •             
    • new2
    •             
    • new3
    •           
            
            
              
                  
    • new4
    •             
    • new5
    •             
    • new6
    •           
            
            
              
                  
    • new7
    •             
    • new8
    •             
    • new9
    •           
            
            
              
                  
    • new10
    •             
    • new11
    •             
    • new12
    •           
            
              
              
                  
    • new13
    •             
    • new14
    •             
    • new15
    •           
            
          
        
               window.onload=function(){         var oli=document.getElementById("ul1").getElementsByTagName("li");         //alert(oli.length);         var odiv=document.getElementById("content").getElementsByTagName("div");         //alert(odiv.length)         for(var i=0;i   

    首先我们在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();给整个函数带上括号,后面的括号为输入参数;

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

    
    
      
        
        多个tab选项卡
        
        
      
      
        
          
              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怎么在网页中实现一个选项卡功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


    新闻名称:利用JavaScript怎么在网页中实现一个选项卡功能
    URL网址:http://cdxtjz.com/article/ipoejh.html