JavaScript实现tab选项卡 

 1 window.onload=function(){
 2             var tab=document.getElementById('tab');
 3             var btn=tab.getElementsByTagName('li');
 4             var odiv=tab.getElementsByTagName('div');
 5             for(var i=0;i<btn.length;i++){
 6                 btn[i].index= i ;
 7                 btn[i].onclick=function(){
 8                     for(var i=0;i<btn.length;i++){
 9                         btn[i].className='';
10                         odiv[i].style.display  = 'none';
11                     }
12                     this.className='active';
13                     odiv[this.index].style.display = 'block';
14                 }
15             }
16         }

 jQuery

$(function(){
            $('.tab').find('li').click(function(){
                $('.tab').find('li').attr('class','');
                $('.tab').find('div').css('display','none');
                $(this).attr('class','active');
                $('.tab').find('div').eq($(this).index()).css('display','block');

            })
        })

 

posted on 2018-01-10 12:23  封寻丸子  阅读(330)  评论(0)  编辑  收藏  举报

导航