CSS部分

.tab{margin:0 auto 50px;}
.tab-hd { background:#fff; overflow:hidden; zoom:1;border-bottom:1px solid #eee}
.tab-hd li{ float:left; width:33.33%;padding:10px 0;text-align:center; cursor:pointer;}
.tab-hd li.active{ background:#fdfdfd;}
.tab-bd li{display:none; padding:20px;}
.tab-bd li.thisclass{ display:list-item;}

JS部分

<script type="text/javascript">
$(function(){
    function tabs(tabTit,on,tabCon){
        $(tabTit).children().hover(function(){
            $(this).addClass(on).siblings().removeClass(on);
            var index = $(tabTit).children().index(this);
               $(tabCon).children().eq(index).show().siblings().hide();
        });
    };
    tabs(".tab-hd","active",".tab-bd");
});
</script>

html

<div class="tab">
        <ul class="tab-hd"><li class="active">选项1</li><li>选项2</li><li>选项3</li></ul>
        <ul class="tab-bd"><li class="thisclass">内容1</li><li>内容2</li><li>内容3</li></ul>
</div>