jQuery简单几行代码实现tab切换

今天突然心血来潮，想到一个很简单的方法即可达到的tab效果

其实逻辑很简单，但看到网上基本上没这样写的

不知道实际应用中是否会有问题呢，请大侠指教

复制代码 代码如下:



   
   

    *{ margin:0; padding:0;}
body, ul, li {
    margin:0;
    padding:0;
}
body {
    font:12px/1.5 Tahoma;
}
#outer {
    width:450px;
    margin:10px auto;
}
#tab {
    overflow:hidden;
    zoom:1;
    background:#000;
    border:1px solid #000;
}
#tab li {
    float:left;
    color:#fff;
    height:30px;
    cursor:pointer;
    line-height:30px;
    list-style-type:none;
    padding:0 20px;
}
#tab li.current {
    color:#000;
    background:#ccc;
}
#content {
    border:1px solid #000;
    border-top-width:0;
}
#content ul {
    line-height:25px;
    display:none;
    margin:0 30px;
    padding:10px 0;
}




   

       
• 第一课

       
• 第二课

       
• 第三课

   

           1111
       

            2222
       

           3333
       

图片演示：

以上就是本文所述的全部内容了，希望大家能够喜欢。