jquery自己实现tab效果

jquery:

$('.tabcont').eq(0).show();  //默认显示第一个内容
      $('.tabcontent li').eq(0).css('background','#ddd');  //默认第一个标题显示颜色不同
      $('.tabcontent li').mouseover(function(){   //鼠标移上去
      $(this).css('background','#ddd').siblings().css('background','#eee');  //标题的颜色变成选中色,其他颜色还原
      $('.tabcont').hide().eq($(this).index()).show();   //当前选中内容显示
      });

html

<div class="tabcontent">
        <div class="tabtit">
        <ul class="">
        <li class="t1">周一</li>
        <li class="t2">周二</li>
        <li class="t3">周三</li>
        </ul>
        </div>
        <div class="tabcont">1.语文课 2.德育课</div>
        <div class="tabcont">2.美术课 3.形体课</div>
        <div class="tabcont">3.美食品尝 2.户外写生</div>
        </div> 

css

.tabtit li{  float: left;width:30%; background: #eee;}  //设置头部颜色
.tabcont{ display: none;}   内容默认不显示