JQ implements tab switching

<!-- html Code begin -->
<div id="outer">
    <ul id="tab" class="">
        <li class="ck"> title 1</li>
        <li> title 2</li>
        <div class="clearfix"></div>
    </ul>
    <div id="content">
        <ul style="display:block;">
           11111111
        </ul>
        <ul style="display:none;">
           222222222222
        </ul>
    </div>
</div>
<!-- html Code end -->

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
	$(function(){
		window.onload = function()
		{
			var $li = $('#tab li');
			var $ul = $('#content ul');
						
			$li.mouseover(function(){
				var $this = $(this);
				var $t = $this.index();
				$li.removeClass();
				$this.addClass('ck');
				$ul.css('display','none');
				$ul.eq($t).css('display','block');
			})
		}
	});
</script>