ul,li,div{ margin:0; padding:0;}  
ul,li{ list-style:none;}  
.tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}  
.tab{ background:#F93; overflow:hidden; width:450px;}  
.tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}  
.tab li.on{background:#F60;}  
.tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }  
.tabContent .hide{ display:none;}  
 
 
     
     
         
         
            
选项卡1
 
            
选项卡2
 
            
选项卡3
 
         
         
            1111

我这边HTML是用了两个一样的结构及样式  是为了测试js在一个页面上多次调用是否成功！JS代码如下：
 

  
    $(function(){  
        function tabs(tabMenu,on,tabContent){  
        $(tabContent).each(function(){  
            $(this).children().eq(0).show();      
        });   
        $(tabMenu).each(function(){  
            $(this).children().eq(0).addClass(on);    
        });  
        $(tabMenu).children().hover(function(){  
            $(this).addClass(on).siblings().removeClass(on);  
            var index = $(tabMenu).children().index(this);  
            $(tabContent).children().eq(index).show().siblings().hide();      
        });  
    }  
    tabs(".tab","on",".tabContent");  
})  
          
     

引用上面的js就可以了！为了更清晰 待会把源文件放在附件里面 随时可以下载看看！下面说说写这个页面的js一点思路！

一 function tabs(tabMenu,on,tabContent){}  用这个函数来封装js 调用的方式是tabs(".tab","on",".tabContent"),其中tabMenu是指li外层ul on是指当鼠标移上去li 希望他有个背景 tabContent 是指content的外层！

二 接着用each来遍历 找到第一个子元素li增加一个类on 第一个content让她们显示！接着当鼠标移到任何一个li时候 让当前的li增加一个类on 同辈元素删除类on  然后索引当前的li 看是第几个 最后找出content  如果他的索引值和li的索引值相同的话 显示内容 同辈元素隐藏掉！思路就这么简单！！！！