Beginner here. I have code for a sliding content piece and I understand it for the most part, but there is something I just CANNOT figure out.

Here is a link to the design Gaya Design did, which I am referencing:Gaya Design - Tabbed content

I would like the tabs to be linkable, so that if you click any content in the box it will jump to that specific tab. I am going to have an image map on each slide that when you click on a specific part, it will take you to a tab at the top. If that makes sense? I know this all falls within the js file, but I am having trouble. I appreciate any help on this.....Thanks

Here is a code:
JS
Code:
//tab effects

var TabbedContent = {
	init: function() {	
		$(".tab_item").mouseover(function() {
		
			var background = $(this).parent().find(".moving_bg");
			
			$(background).stop().animate({
				left: $(this).position()['left']
			}, {
				duration: 300
			});
			
			TabbedContent.slideContent($(this));
			
		});
	},
	
	slideContent: function(obj) {
		
		var margin = $(obj).parent().parent().find(".slide_content").width();
		margin = margin * ($(obj).prevAll().size() - 1);
		margin = margin * -1;
		
		$(obj).parent().parent().find(".tabslider").stop().animate({
			marginLeft: margin + "px"
		}, {
			duration: 300
		});
	}
}

$(document).ready(function() {
	TabbedContent.init();
});
CSS
.tabbed_content {
background-color: #000000;
width: 620px;
}

.tabs {
height: 62px;
position: relative;
}

.tabs .moving_bg {
padding: 15px;
background-color:#7F822A;
background-image:url(../images/arrow_down_green.gif);
position: absolute;
width: 125px;
z-index: 190;
left: 0;
padding-bottom: 29px;
background-position: bottom left;
background-repeat: no-repeat;
}

.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #ffffff;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;
}

.tabbed_content .slide_content {
overflow: hidden;
background-color: #000000;
padding: 20px 0 20px 20px;
position: relative;
width: 600px;
}

.tabslider {
width: 5000px;
}

.tabslider ul {
float: left;
width: 560px;
margin: 0px;
padding: 0px;
margin-right: 40px;
}

.tabslider ul a {
color: #ffffff;
text-decoration: none;
}

.tabslider ul a:hover {
color: #aaaaaa;
}

.tabslider ul li {
padding-bottom: 7px;
}

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Gaya Design - Tabbed content</title>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<link href='css/style.css' rel='stylesheet' type='text/css' />
		
		<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
		
		<link href='css/tabbedContent.css' rel='stylesheet' type='text/css' />
		<script src="js/tabbedContent.js" type="text/javascript"></script>
	</head>
	
	<body>
		<div style='padding: 15px;'>
		
		  <div class='content'>
				
				<h1>Tabbed content with jQuery</h1>
				
				<p>
					An example of some tabbed content containers.
				</p> 
				
				<h2>Example:</h2>
				
				<div class='tabbed_content'>
					<div class='tabs'>
						<div class='moving_bg'>
							&nbsp;
						</div>
						<span class='tab_item'>
							Latest posts
						</span>
						<span class='tab_item'>
							Top posts
						</span>
						<span class='tab_item'>
							Partners
						</span>
						<span class='tab_item'>
							Links
						</span>
					</div>
					
					<div class='slide_content'>						
						<div class='tabslider'>
							<ul>
								<li>
									<a href='http://www.gayadesign.com/general/new-looks-coming-your-way/'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='http://www.gayadesign.com/diy/image-slider-for-displaying-pictures-or-portfolios/'>
										Image slider for displaying pictures or portfolios
									</a>
								</li>
								<li>
									<a href='http://www.gayadesign.com/diy/ajaxtwits-load-tweets-on-your-website-with-ajax/'>
										AjaxTwits - Load Tweets on your website with AJAX
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='http://www.gayadesign.com/diy/panoramic-photoviewer-in-javascript/'>
										Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='http://www.gayadesign.com/general/new-looks-coming-your-way/'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='http://www.gayadesign.com/diy/jquery-convertion-panoramic-photoviewer-in-javascript/'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='http://www.gayadesign.com/diy/lightbox-photonav-lightnav/'>
										Lightbox + PhotoNav = LightNav
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='http://www.siebdesign.nl/'>
										Sieb Design | Design + Illustration
									</a>
								</li>
								<li>
									<a href='http://www.cybox.nl/'>
										Cybox | Internet & Communicatie
									</a>
								</li>
								<li>
									<a href='http://www.hypekid.com/'>
										Hypekid | Pim Arts, a freelance web-developer from the Netherlands
									</a>
								</li>
								<li>
									<a href='http://www.marcofolio.net/'>
										Marcofolio | Marco's weblog
									</a>
								</li>
								<li>
									<a href='http://dev-tips.com/'>
										Dev Tips | Become a better developer, one tip at a time
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='http://www.last.fm/user/xgayax'>
										Last.fm profile
									</a>
								</li>
								<li>
									<a href='http://twitter.com/gayadesign'>
										Gaya Design on Twitter
									</a>
								</li>
								<li>
									<a href='http://www.youtube.com/user/xgayax'>
										My Youtube Channel
									</a>
								</li>
								<li>
									<a href='http://www.linkedin.com/pub/5/762/121'>
										Linked in profile
									</a>
								</li>
								<li>
									<a href='http://ds.gayadesign.nl/'>
										Stuff to do with a NDS blog
									</a>
								</li>
							</ul>
						</div>
						<br style='clear: both' />
					</div>
				</div>
				
				<br />
				<br />
				<br />
			</div>
			
		</div>
	</body>
</html>