原生js选项卡

最新推荐文章于 2023-02-11 17:36:16 发布

Mean。

最新推荐文章于 2023-02-11 17:36:16 发布

阅读量335

点赞数 1

分类专栏： JavaScript 文章标签：选项卡 csdn

本文链接：https://blog.csdn.net/Mean_/article/details/77161570

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

用原生js写了个选项卡

代码如下：





  
   
   
  
   
   
  
   
   
  Document
  



  
   
   
    
    
    tab1
tab2
tab3
tab4
    
    
    
      
     
     
      
      11111111111111111111111111111
     
     
      
     
     
      
      22222222222222222222222222222
     
     
      
     
     
      
      33333333333333333333333333333
     
     
      
     
     
      
      44444444444444444444444444444
     
     
    
    
    
  
   
   
  <script>
    window.onload = function() {
      var tabTitle = document.getElementById('tabTitle');
      var title_li = tabTitle.getElementsByTagName('li');
      var tabContent = document.getElementById('tabContent');
      var tab_div = tabContent.getElementsByTagName('div');

      for (var i = 0; i < title_li.length; i++) {
        title_li[i].index = i;
        title_li[i].onclick = function() {

          for (var i = 0; i < title_li.length; i++) {
            title_li[i].className = '';
            tab_div[i].className = '';
          }
          this.className = 'titleActive';
          tab_div[this.index].className = 'contentActive';
        }
      }

    }
  </script>