Arkadaşlar gerek kalmadı uğraşarak çözdüm;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>jQuery Öğreniyoruz</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$("document").ready(function(){
			$(".tab_icerik").hide();
			$("ul li:first").addClass("aktif");
			$(".tab_icerik:first").show();
			$("ul li").click(function(){
				$("ul li").removeClass("aktif");
				$(this).addClass("aktif");
				$(".tab_icerik").hide();
				indis	=	$(this).index();
				$(".tab_icerik:eq("+indis+")").slideDown();
			});
		});
	</script>
<style type="text/css">
.clear{clear:both;}
ul	{list-style:none;margin:0;padding:0;height:30px;background:#f0f0f0;border:1px solid #ccc;font:12px tahoma;width:500px;}
ul li	{float:left;}
ul li a	{display:block;line-height:30px;text-decoration:none;padding:0 10px;}

.tab_icerik	{padding:10px;border:1px solid #ccc;width:480px;}

.aktif	{background:#fff;color:#c03;}
</style>
</head>
<body>
				<div id="wrapper">
					<ul>
						<li><a href="#">Tab1</a></li>
						<li><a href="#">Tab2</a></li>
						<li><a href="#">Tab3</a></li>
						<li><a href="#">Tab4</a></li>
					</ul>
					<div class="clear"></div>
					<div class="tab_icerik">Tab1'e ait içerik</div>
					<div class="tab_icerik">Tab2'e ait içerik</div>
					<div class="tab_icerik">Tab3'e ait içerik</div>
					<div class="tab_icerik">Tab4'e ait içerik</div>
				</div>
</body>
</html>