1、CSS部分

#outer { 
    width:800px; 
    margin:10px auto; 
} 
#tab { 
    overflow:hidden; 
    zoom:1; 
    background:#CCC; 
    border:1px solid #EAEAEA; 
    border-bottom: none;
} 
#tab li { 
    float:left; 
    color:#353535; 
    cursor:pointer; 
    line-height:20px; 
    list-style-type:none; 
    padding:10px 20px; 
} 
#tab li.current { 
    color:#000; 
    background:#FFF; 
} 
#content { 
    border:1px solid #EAEAEA; 
    border-top-width:0; 
} 
#content li { 
    line-height:25px; 
    display:none; 
    margin:0 30px; 
    padding:10px 0; 
}

<div id="outer"> 
    <ul id="tab"> 
        <li class="current">第一课</li> 
        <li>第二课</li> 
        <li>第三课</li> 
    </ul> 
    <ul id="content"> 
        <li style="display:block;"> 1111 </li> 
        <li>2222 </li> 
        <li>3333 </li> 
    </ul> 
</div> 

3、JS部分

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 

$(function(){ 
    window.onload = function(){ 
        var $li = $('#tab li'); 
        var $ul = $('#content li'); 
        $li.click(function(){ 
            $li.removeClass(); 
            var $t = $(this).index(); 
            $(this).addClass('current'); 
            $ul.css('display','none'); 
            $ul.eq($t).css('display','block'); 
        }) 
    } 
});