实现效果：

JQ简单选项卡实现，实现原理：当点击选项卡栏目时为当前栏目添加一个class，然后通过index()获得其为第几个栏目，然后通过eq()选择对应的内容显示。

布局代码：

     
       　　
          
      
        
       
            
        
栏目1
            
        
栏目2
        
       
    
      
 　　
          
      
        
       
            
        
                
         
                    a                
                
         
                    b                
            
        
        
       
        
       
            
        
                
         
                    1                
                
         
                    2                
            
        
        
       
    
      
     

 JQ实现：

$('.tab_menu>ul>li:first').addClass('current');var tabNum = $('.tab_menu>ul>li').index($('.tab_menu>ul>li.current'));$('.tab_content .tab_container').eq(tabNum).show();$('.tab_menu>ul>li').click(function(){    var tabNumOld = $('.tab_menu>ul>li').index($('.tab_menu>ul>li.current'));    var tabNumHover = $('.tab_menu>ul>li').index(this);    if(tabNumOld == tabNumHover){        return false;    }    $('.tab_menu>ul>li').finish().removeClass('current').eq(tabNumHover).addClass('current');    $('.tab_content .tab_container').finish().hide().eq(tabNumHover).show();})

 最终效果

　　

• 栏目1
• 栏目2

　　

• a
• b

• 1
• 2