html简单的选项卡

最新推荐文章于 2024-05-06 21:05:10 发布

2012013977

最新推荐文章于 2024-05-06 21:05:10 发布

阅读量2.1k

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/nianzhi1202/article/details/70860207

版权

html 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

基于jquery：




    
   
   
    
   
   
    
   
   
    <script src="jquery-1.7.2.min.js"></script>
    Document




   
   


   
   
    
    
    
     
     这里是第一块
    
    
    
    
    
     
     这里是第二块
    
    
    
    
    
     
     这里是第三块
    
    
    
    
    
     
     这里是第四块
    
    

   
   
<script>
    $('ul li').on('click',function(){
        $(this).addClass('active').siblings().removeClass('active');
        $('section div').addClass('hid');
        $('section div:eq('+$(this).index()+')').removeClass('hid');
    });
</script>

原生js：




    这是一个测试
    
    
    
    



    
    
    
     
     这是一个测试

    
    

    
    
    
     
     
        
      
      tab1
        
      
      tab2
        
      
      tab3
        
      
      tab4
        
      
      tab5
    
     
     
    
     
     
        
      
      
       
       
            c
        
      
      
        
      
      
       
       
            a
        
      
      
        
      
      
       
       
            b
        
      
      
        
      
      
       
       
            c
        
      
      
        
      
      
       
       
            d
        
      
      
    
     
     

    
    

<script language="javascript">
    var tabs = document.getElementsByName('tab');
    var contents = document.getElementsByName('divcontent');

    (function changeTab(tab) {
        for(var i = 0, len = tabs.length; i < len; i++) {
            tabs[i].onmouseover = showTab;
        }
    })();
    function showTab() {
        for(var i = 0, len = tabs.length; i < len; i++) {
            if(tabs[i] === this) {
                tabs[i].className = 'selected';
                contents[i].className = 'show';
            } else {
                tabs[i].className = '';
                contents[i].className = 'hide';
            }
        }
    }
</script>